jquery sortable:排序项触发重新排序

时间:2011-03-26 10:33:03

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

我有一个代表div图层的项目列表。当我对其中一个列表项进行排序时,我希望对它们各自的div图层进行排序。

list:这些项目可以排序

<ul id="sortable">
   <li id="1">Div 1</li>
   <li id="2">Div 2</li>
   <li id="3">Div 3</li>
</ul>


div layers:这些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会自动转到第二个位置


init

$('#sortable').sortable();

2 个答案:

答案 0 :(得分:3)

如果我得到你要求的东西,这段代码可能就是你想要的:

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,但是您应该对可排序选择器进行参数化,以便能够在任何两个列表上使用它们,例如。如果你在init之后绑定了sortable。

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

答案 1 :(得分:1)

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