sorting nested list, allow only li to be sorted witin the same ul
- by Y.G.J
what i want to achive is:
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.
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.
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?
$(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");
}
});
});
this is the html part
<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>
