jquery sortable：已排序的项目触发重新排序答案

【问题标题】：jquery sortable: sorted item triggers reorderingjquery sortable：已排序的项目触发重新排序
【发布时间】：2011-03-26 10:33:03
【问题描述】：

我有一个代表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();

【问题讨论】：

请问您将如何对它们进行排序？
@0x90，这个名字有点误导 - jQuery 可排序意味着您可以将项目拖放到新的顺序中。所以我假设 OP 的意思是，你抓住 1 并将其拖到 3 下方（导致 Div2 Div3 Div1），应用程序会自动重新排列 div_container 中的内容（进入 Div 2 项，Div 3 项，第 1 项）

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

如果我得到了您的要求，此代码可能就是您想要的：

http://jsfiddle.net/NsawH/84/

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，但是您应该对可排序选择器进行参数化，以便能够在任何两个列表中使用它们，例如。如果您在初始化后绑定到可排序。

代码对 jQuery dom 修改友好，因为它使用选择器索引而不是节点 dom 索引。您将在 JSFiddle 上看到我将 div_container 设置为可排序的，并且它会同步回列表。

【讨论】：

这太好了，非常感谢您提供代码和指南！
正是我想要的......谢谢！

【解决方案2】：

绑定可排序的change 事件（如果您想要实时更新）或stop（仅读取结束状态），并相应地手动重新排序 div。

【讨论】：