title: jQuery Nested Sortable - Move LI elements within all available UL's
body: <p>I have the following code which works although it runs quite slowly I feel.  What I want to do is allow <code>&lt;li&gt;</code>'s to be moved freely under existing <code>&lt;ul&gt;</code>'s or move them up a level. I also want to be able to create hierarchies so if you dragged a <code>&lt;li&gt;</code> under another <code>&lt;li&gt;</code> that would create a hierarchy. I think in that sense I would have to render a <code>&lt;ul&gt;</code> under each <code>&lt;li&gt;</code> just in case.  I only want to limit it to 2 or 3 levels deep.</p>
  
  <pre><code>$("#sort_list").sortable({
    containment: 'parent',                                                                                     
    axis: 'y',
    revert: true,
    opacity: 0.8
  });
  $(".sub_list").sortable({ 
    containment: 'parent',
    axis: 'y',
    revert: true,
    opacity: 0.8,
  });
  $("#sort_list").disableSelection();
  
  &lt;ul id="sort_list"&gt;
    &lt;li&gt;one&lt;/li&gt;
    &lt;li&gt;two
      &lt;ul class="sub_list"&gt;
      &lt;li&gt;sub one&lt;/li&gt;
      &lt;li&gt;sub two&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;three&lt;/li&gt;
    &lt;li&gt;four&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>