CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-sortable
MarkokraM
MarkokraM

Reputation: 990

Nested sortable items with jQuery (ui elements inside the parent)

I'm trying to do ui component presented below:

https://jsfiddle.net/c1zukjev/2/

Solutions I have found so far are little bit different, cause they attach child items below the parent, not inside:

http://mjsarfatti.com/sandbox/nestedSortable/

Is it possible to drag and drop element inside certain childs and create child a new sortable panel list?

My main function is this so far:

$(function($) {
    $('.frame .sections').droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        accept: '.form-elements',
        greedy: true,
        drop: function (event, ui) {
            $(ui.draggable).addClass("insidePopup");
            ui.draggable.detach().appendTo($(this));
        }
    });

    var panelList = $('#draggablePanelList');

    panelList.sortable({
        handle: '.panel-heading', 
        update: function() {
            $('.panel', panelList).each(function(index, elem) {
                var $listItem = $(elem),
                    newIndex = $listItem.index();
            });
        }
    });
});

Expected layout:

Expected layout

Upvotes: 0

Views: 1724

Answers (1)

MarkokraM
MarkokraM

Reputation: 990

After some experiments, I found, that there is no need for dragable element at all, just sortable with connectWith attribute. Working example based on earlier:

https://jsfiddle.net/r18k4Lb0/

Main js is:

$(function($) {
    var panelList = $('.sortable');
    panelList.sortable({
        handle: '.panel-heading',
        connectWith: '.sortable',
        placeholder: 'ui-state-hover'
    });
});

Nested sortable

Upvotes: 2

Related Questions