我通过PHP/MySQL动态生成了这个标记
<div id="sortable">
<h3>Italy</h3>
<ul>
<li id="row_1">Record > 1</li>
<li id="row_2">Record > 2</li>
<li id="row_3">Record > 3</li>
</ul>
<h3>Europe</h3>
<ul>
<li id="row_4">Record > 4</li>
<li id="row_5">Record > 5</li>
<li id="row_6">Record > 6</li>
</ul>
<h3>World</h3>
<ul>
<li id="row_7">Record > 7</li>
<li id="row_9">Record > 9</li>
<li id="row_8">Record > 8</li>
</ul>
</div>
<div id="response"></div>
我可以将带有jQuery UI sortable的LIs拖到新的位置,并使用“serialize”获取它们的新订单,为数据库更新做好准备
如您所见,有3个ul,但它们的N-LIs都是相关的,所以每次拖动时我都得到一个N-items“序列化”,这正是我想要的
所以,如果我把唱片3移到唱片1的位置,我会得到:
3,2,1,4,5,6,7,8,9<这正是我想要的
而不是这个:
3,2,1<这不是我想要的
这是我的jQuery代码:
$("#sortable").sortable({
items: 'li',
opacity: 0.6,
cursor: 'move',
update: function() {
var order = $(this).sortable("serialize") + '&nAction=move';
$.post("mypage.php", order, function(response){
$("#response").html(response);
});
}
}).disableSelection();
它可以工作,但不是我想要的那样:我的意思是我只需要在它们各自的UL中拖放LIs,而不是从一个UL到另一个UL(始终保持N项序列化)
换言之,我希望能够对其中的记录1, 2和3进行排序,其中4, 5和6,其中7,8,9没有混合(即,记录1不能进入第4、5、6组,也不在第7、8、9组)。
当然,总是得到N项序列化!(这就是我将“sortable”应用于容器潜水然后指定LI项的主要原因)
我试过用“containment:”parent“,但它只在第一次拖放时起作用
以下是使用jsFiddle制作的两个在线示例:
-
The original one
,LIs从一个UL转到另一个UL
-
The version with "containment"
,仅在第一次拖动时有效,但在下面的拖动中很混乱