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

Question

我正在尝试做下面提到的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();
            });
        }
    });
});

预期布局：

Answer 1

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

https://jsfiddle.net/r18k4Lb0/

主要的js是：

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