$(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>
我遇到的问题:
- 对主要的 ul 进行排序是有效的,但不是一直都在工作 - 我会尝试自己解决这个问题,但如果这里的代码有问题,而不是 proccess-sortable 中的代码有问题 - 告诉我。
- 在主 ul 中移动 li 是可以的,但是 sub 或 sub 的 sub 有问题 - 我可以将一些东西从一个 sub 拖到它的 sub 或其他方式 - 我不希望这种情况发生。
- 我希望能够拖动 li 并选择只有这个 ul 组将发送到 proccess-sortable 以进行更新的那个 - 我怎样才能捕捉到我正在拖动的 li 的特定 ul?