title: Jquery UI: drag new sortable list
body: <p>I've found jQuery UI demo, which connects draggable and sortable plugins. (http://jqueryui.com/demos/draggable/sortable.html) I would like to make some kind of tree, create similar draggable emlement (yellow) that could be dragged to the old list and at once it would be a another, new sortable list (in which i can put another draggable elements)</p>
  
  <p>Code i've modified:</p>
  
  <pre><code>$(function() {
      $( ".sortable" ).sortable({
          revert: true
      });
      $( ".draggable" ).draggable({
          connectToSortable: ".sortable",
          helper: "clone",
          revert: "invalid"
      });
      $( "ul, li" ).disableSelection();
  });
  
  
  &lt;ul&gt;
  &lt;li class="draggable ui-state-highlight"&gt;
      &lt;ul id="sortable-2" class="sortable"&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="draggable ui-state-highlight"&gt;any element&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul id="sortable" class="sortable"&gt;
      &lt;li&gt;first element&lt;/li&gt;
      &lt;li&gt;second element&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>does not work propely. I can only put 'any element' on #sortable-2, only when #sortable-2 is on draggable unsorted list. When I move #sortable-2 list on correct position ( between first and second element I can't put 'any element' on it )</p>
  
  <p>I would appreciate any answers. Thank you!</p>