sorting nested list, allow only li to be sorted witin the same ul

Question

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

});

<ul id="test-list">
  <li id="listItem_10">first<img align="middle" src="Themes/arrow.png" class="handle" /></li>
  <li id="listItem_8">second<img align="middle" src="Themes/arrow.png" class="handle" />
    <ul id="test-sub">
      <li id="listItem_4"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
      <li id="listItem_3"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
        <ul id="test-sub">
          <li id="listItem_9"><img align="middle" src="Themes/arrow.png" class="handle2" /></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

the problems i have:

1. sorting the main ul is working but not all the time - i will try to fix that my own but if there is a problem with the code here and not the one in proccess-sortable - tell me.
2. moving li in the main ul is ok but the sub or the sub of the sub is having problem - i can drag something from one sub to it's sub or the other way too - i don't want that to happend.
3. i want to be able to drag li and by selecting that one that only this ul group will send to proccess-sortable to be updated - how can i catch the specific ul of li i am draging?

Answer 1

the first thing I see is that your giving the same id to multiple UL's and you really only need to set sortable to the the mother uL you can use one of the sortable events such as change to get the ul of the li you moved to handle the load process

Edit: adding more info

ok so I went back and looked at what I did for my nested sortable and what I had done was used behind's nested sortable it requires ui.core but does what we want to do. I then used serialize_list to serialize the data back to my server. Not claim it to be the best but thats how I ended up doing it.

Edit Again here is what I found in your code I didn't change anything just commented it

  $(document).ready(function() {
    $("#test-list").sortable({
      items: "> li", // this is wrong should be "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({ // this should be a class so that you can target multiple items
      containment: "ul",
      items: "li",
      handle : '.handle2',
      axis: 'y',
      opacity: 0.6,
      update : function () {
        var order = $('ul').sortable('serialize'); // this say get all ul items it should probably target $(this).closest('ul);
        $("#info").load("process-sortable.asp?"+order+"&id=catid&order=orderid&table=tblCats");
        }
    });
  });

then you need to go through your html make sure you have no duplicate ids and your nesting is off in addition to that your missing a quote on listitem_4

take the time to look at your html before you post it is often a problem you should use w3's validator