嵌套排序项目使用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

一些实验后，我发现，没有必要dragable元素可言，只是可以用connectWith属性排序。工作基于前面的例子：

https://jsfiddle.net/r18k4Lb0/

主要JS是：

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