title: Nested sortable items with jQuery (ui elements inside the parent)
body: <p>I'm trying to do ui component presented below:</p>
  
  <p><a href="https://jsfiddle.net/c1zukjev/2/" rel="nofollow noreferrer">https://jsfiddle.net/c1zukjev/2/</a></p>
  
  <p>Solutions I have found so far are little bit different, cause they attach child items below the parent, not inside: </p>
  
  <p><a href="http://mjsarfatti.com/sandbox/nestedSortable/" rel="nofollow noreferrer">http://mjsarfatti.com/sandbox/nestedSortable/</a></p>
  
  <p>Is it possible to drag and drop element inside certain childs and create child a new sortable panel list?</p>
  
  <p>My main function is this so far:</p>
  
  <pre><code>$(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();
              });
          }
      });
  });
  </code></pre>
  
  <p>Expected layout:</p>
  
  <p><img src="https://i.stack.imgur.com/Eahdw.png" alt="Expected layout"></p>