jQuery UI after dragable not working sortable

Question

After dragged element "DRAG and SORT" on the bottom I lose the ability to sort the list in this element. I would like to be able to sort both between the elements of X and H (in box) on sortable list.

Code:

 $(function() {
$( "#sortable" ).sortable({
  revert: true,
  handle: "span"
});
 $( ".insort" ).sortable({
  revert: true,
    handle: ".handle"  
}); 
$( ".draggable" ).draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  revert: "invalid",
  handle: "span"
});
$( "ul, li" ).disableSelection();
  });

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
.insort div{border:2px solid red; padding:2px; margin:5px}
span {font-weight:bold; padding:3px;}
b{padding-right:20px}

   

 <link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

   
<ul>
    <li class="draggable ui-state-highlight"><span>X</span> Drag me down</li>
  <li class="draggable ui-state-highlight "><span>X</span> Drag and SORT
      <div class="insort">
          <div><b class="handle">H</b>SORT1</div>
          <div><b class="handle">H</b>SORT2</div> 
          <div><b class="handle">H</b>SORT3</div> 
      </div>
      </li>
</ul>
 <hr>
<ul id="sortable">
  <li class="ui-state-default"><span>X</span>Item 1</li>
  <li class="ui-state-default"><span>X</span>Item 2</li>
  <li class="ui-state-default"><span>X</span>Item 3</li>
  <li class="ui-state-default"><span>X</span>Item 4</li>
  <li class="ui-state-default"><span>X</span>Item 5</li>
</ul>

jsFiddle

Thanks in advance for your help

Answer 1

You need to make the new (cloned) elements sortable. You can do this by calling a function in the draggable's stop event:

$(function() {
    $( "#sortable" ).sortable({
      revert: true,
      handle: "span"
    });
    //make this a function so we can call it later rather than duplicate the code
    function insort(){
        $( ".insort" ).sortable({
            revert: true,
            handle: ".handle"  
        });
    }
    insort();//call immediately

    $( ".draggable" ).draggable({
      connectToSortable: "#sortable",
      helper: "clone",
      revert: "invalid",
      handle: "span",
      stop: function() {
           insort();//call our new insort function to make our cloned elements sortable
      }
    });
    $( "ul, li" ).disableSelection();
});

ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
li { margin: 5px; padding: 5px; width: 150px; }
.insort div{border:2px solid red; padding:2px; margin:5px}
span {font-weight:bold; padding:3px;}
b{padding-right:20px}

   

 <link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

   
<ul>
    <li class="draggable ui-state-highlight"><span>X</span> Drag me down</li>
  <li class="draggable ui-state-highlight "><span>X</span> Drag and SORT
      <div class="insort">
          <div><b class="handle">H</b>SORT1</div>
          <div><b class="handle">H</b>SORT2</div> 
          <div><b class="handle">H</b>SORT3</div> 
      </div>
      </li>
</ul>
 <hr>
<ul id="sortable">
  <li class="ui-state-default"><span>X</span>Item 1</li>
  <li class="ui-state-default"><span>X</span>Item 2</li>
  <li class="ui-state-default"><span>X</span>Item 3</li>
  <li class="ui-state-default"><span>X</span>Item 4</li>
  <li class="ui-state-default"><span>X</span>Item 5</li>
</ul>