我有一个代表 div
层的项目列表。当我对这些列表项之一进行排序时,我希望它们各自的 div 层也被排序。
列表:这些项目是可排序的
<ul id="sortable">
<li id="1">Div 1</li>
<li id="2">Div 2</li>
<li id="3">Div 3</li>
</ul>
div 层:这些 div 将被重新排序
<div id="div_container">
<div id="div1">Div 1 item</div>
<div id="div2">Div 2 item</div>
<div id="div3">Div 3 item</div>
</div>
例子:当li#1
移动到第二个位置时,div#1
自动移动到第二个位置
初始化
$('#sortable').sortable();
最佳答案
如果我得到你想要的,这段代码可能就是你想要的:
var indexBefore = -1;
function getIndex(itm, list) {
var i;
for (i = 0; i < list.length; i++) {
if (itm[0] === list[i]) break;
}
return i >= list.length ? -1 : i;
}
$('#sortable').sortable({
start: function(event, ui) {
indexBefore = getIndex(ui.item, $('#sortable li'));
},
stop: function(event, ui) {
var indexAfter = getIndex(ui.item,$("#sortable li"));
if (indexBefore==indexAfter) return;
if (indexBefore<indexAfter) {
$($("#div_container div")[indexBefore]).insertAfter(
$($("#div_container div")[indexAfter]));
}
else {
$($("#div_container div")[indexBefore]).insertBefore(
$($("#div_container div")[indexAfter]));
}
}
});
此代码是可移植的,因为它不使用元素 ID,但是您应该参数化可排序选择器以便能够在任何两个列表上使用它们,例如。如果您在 init 之后绑定(bind)到 sortable。
代码是 jQuery dom 修改友好的,因为它使用选择器索引而不是节点 dom 索引。您将在 JSFiddle 上看到我将 div_container 设置为可排序的,并且它会同步回列表。
关于javascript - jquery 可排序 : sorted item triggers reordering,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5441721/