jquery sortable：排序项目触发重新排序 [英] jquery sortable: sorted item triggers reordering

问题描述

我有一个代表 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图层：这些div会重新订购

 < div id =div_container> 
< div id =div1> Div 1项目< / div> 
< div id =div2> Div 2项目< / div> 
< div id =div3> Div 3项目< / div> 
< / div> 
  

例子：当 li＃1 移动到第二位时， div＃1 会自动转到第二个位置

init

  $（ '＃排序'）排序（）; 
  

解决方案

你要求：

http：// jsfiddle。 net / NsawH / 84 /

  var indexBefore = -1; 
 
函数getIndex（itm，list）{
 var i; 
 for（i = 0; i  if（itm [0] === list [i]）break; 
} 
返回i> = list.length？ -1：我; 
 
 
 $（'＃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之后绑定到可排序的元素。

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

I have a list of items that represent div layers. When I sort one of these list items, I want their respective div layers to be sorted aswell.

list: these items are sortable

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

div layers: these divs will be reordered

<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>

example: when li#1 moves to the second place, then div#1 goes to the second position automatically

init

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

解决方案

This code could be what you want if I got what you are asking for:

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]));
       }
   }
});

This code is portable since it does not use element ID's, however you should parametrize the sortable selector to be able to use them on any two lists eg. if you are binding to the sortable after init.

The code is jQuery dom modification friendly since it uses selector indexes and not node dom indexes. You will see on JSFiddle that i made the div_container a sortable , and it syncs back to the list.

这篇关于jquery sortable：排序项目触发重新排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！