problem with jquery sortable of ul with childrens - how to allow li to be sorted only on the same le

Posted by Y.G.J on Stack Overflow See other posts from Stack Overflow or by Y.G.J
Published on 2010-03-25T18:35:30Z Indexed on 2010/03/26 7:23 UTC
Read the original article Hit count: 269

Filed under:
|
    $(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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about nested-lists