jquery nested sortable list

Question

i have this code

$(document).ready(function() {
    $("#test-list").sortable({
        items: "> li",
        handle : '.handle',
        axis: 'y',
        opacity: 0.6,
        update : function () {
            var order = $('#test-list').sortable('serialize');
            $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&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+"&id=catid&order=orderid&table=tblCats");
        }
    });
});

for this kind of UL

<ul id="test-list">
  <li></li>
  <li>
    <ul id="test-sub">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

what is wrong?

Answer 1

UPDATE

• MOVE LI from one UL to another UL http://jsbin.com/ifizi3/9/edit

DEMO: http://jsbin.com/ifizi3/4/edit

your problem was the handle!

try your version by just commenting the handle: (it will work nice) but if you want use the handle you need to use the following form:

    $(document).ready(function() {
        $("#test-list").sortable({
            //use connectWith for move to another UL
            //connectWith: 'selector';
            items: "> li",
            handle : '.handle',
            axis: 'y',
            opacity: 0.6,
            update : function () {
                var order = $('#test-list').sortable('serialize');
                $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
            }
        });
        $("#test-sub").sortable({
            containment: "ul",
            items: "li",
            handle : '.handle2',
            axis: 'y',
            opacity: 0.6,
            update : function () {
                var order = $('#test-list').sortable('serialize');
                $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
            }
        });
    });​

    <ul id="test-list">
      <li><span class="handle">text</span></li>
      <li>
<!--/ remove the UL class if don't want move the UL /-->
        <ul class="handle" id="test-sub">
           <li><span class="handle2">text</span></li>
          <li><span class="handle2">text</span></li>
         <li><span class="handle2">text</span></li>
         <li><span class="handle2">text</span></li>
         <li><span class="handle2">text</span></li>
          <li><span class="handle2">text</span></li>
       </ul>
      </li>
       <li><span class="handle">text</span></li>
       <li><span class="handle">text</span></li>
       <li><span class="handle">text</span></li>
       <li><span class="handle">text</span></li>
    </ul>