<div id="drag_drop_categories_{{rand}}">
    <ul dragdropcategory="drag_drop_categories_start_area" class="connectedSortable category_item_list clearfix">
        {% if savedData is empty %}
            {% for d in data %}
            <li class="ui-state-default category_item m-2" >{{d}}</li>
            {% endfor %}
        {% else %}
            {% for sd in savedData['drag_drop_categories_start_area'] %}
            <li class="ui-state-default category_item m-2" >{{sd}}</li>
            {% endfor %}
        {% endif %}
    </ul>
    
    <div class="container-fluid">
        <div class="row">
            {% for category in categories %}
            <div class="col-12 col-sm-6 col-md-4 col-xl-4 border category_card d-flex flex-column p-0">
                <div class="category_card_header box-header" {% if category.head_color != "" %}style="background-color: {{category.head_color}};"{% endif %}>
                    <h4 class="text-center" {% if category.title_color != "" %}style="color: {{category.title_color}};"{% endif %}>{{category.title}}</h4>
                </div>
                <ul dragdropcategory="{{category.title}}" class="category_card_body connectedSortable category_item_list h-100 mb-0" {% if category.body_color != ""%}style="background-color: {{category.body_color}};"{% endif %}>
                    {% if savedData is not empty %}
                        {% for item in savedData[category.title] %}
                        <li class="ui-state-default category_item m-2" >{{item}}</li>
                        {% endfor %}
                    {% endif %}
                </ul> 
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<script>
    jQuery("ul.category_item_list").sortable({
        connectWith: ".connectedSortable",
        {% if saveFormId is not empty %}
        stop: function(event, ui){
            var categoryLists = new Object();
            jQuery("#drag_drop_categories_{{rand}}").find("ul.connectedSortable").each(function(){
                var itemsThisList = [];
                jQuery(this).find("li").each(function(){
                    itemsThisList.push(jQuery(this).text());
                });
                var categoryName = jQuery(this).attr("dragdropcategory");
                categoryLists[jQuery(this).attr("dragdropcategory")] = itemsThisList;
            });
            jQuery('.ts-forms-form-{{saveFormId}}').find("textarea").val(JSON.stringify(categoryLists));
        }
        {% endif %}
    }).disableSelection();
</script>