Вложенных сортные элементы с JQuery (элементы пользовательского интерфейса внутри родителя)

Question

Я пытаюсь сделать компонент пользовательского интерфейса представлены ниже:

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' 
    }); 
});