使用 jQuery 嵌套可排序项目（父级内的 ui 元素）答案

【问题标题】：Nested sortable items with jQuery (ui elements inside the parent)使用 jQuery 嵌套可排序项目（父级内的 ui 元素）
【发布时间】：2015-04-20 12:57:56
【问题描述】：

我正在尝试做如下所示的 ui 组件：

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

到目前为止我发现的解决方案有点不同，因为它们将子项附加在父项下方，而不是内部：

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

是否可以在某些子元素中拖放元素并为子元素创建一个新的可排序面板列表？

到目前为止，我的主要功能是：

$(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();
            });
        }
    });
});

预期布局：

【问题讨论】：

标签： jquery jquery-ui jquery-ui-sortable

【解决方案1】：

经过一些实验，我发现根本不需要可拖动的元素，只需使用 connectWith 属性进行排序即可。基于前面的工作示例：

https://jsfiddle.net/r18k4Lb0/

主要的js是：

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

【讨论】：