sorting nested list, allow only li to be sorted witin the same ul
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/27
22:43 UTC
Read the original article
Hit count: 179
Filed under:
jQuery
|nested-lists
$(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:
- 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?
© Stack Overflow or respective owner
