title: jquery nested sortable list
body: <p>i have this code</p>
  
  <pre><code>$(document).ready(function() {
      $("#test-list").sortable({
          items: "&gt; li",
          handle : '.handle',
          axis: 'y',
          opacity: 0.6,
          update : function () {
              var order = $('#test-list').sortable('serialize');
              $("#info").load("process-sortable.asp?"+order+"&amp;id=catid&amp;order=orderid&amp;table=tblCats");
          }
      });
      $("#test-sub").sortable({
          containment: "ul",
          items: "li",
          handle : '.handle',
          axis: 'y',
          opacity: 0.6,
          update : function () {
              var order = $('#test-list').sortable('serialize');
              $("#info").load("process-sortable.asp?"+order+"&amp;id=catid&amp;order=orderid&amp;table=tblCats");
          }
      });
  });
  </code></pre>
  
  <p>for this kind of UL</p>
  
  <pre><code>&lt;ul id="test-list"&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;
      &lt;ul id="test-sub"&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
        &lt;li&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but it can be changed dynamiclly...
  when i drag and drop the main li it is working
  when i do it with the childs it will drag the main one</p>
  
  <p>what is wrong?</p>