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

发布于 2024-10-26 03:38:27 字数 736 浏览 5 评论 0原文

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

原文

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();

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无远思近则忧 2024-11-02 03:38:27

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

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 之后绑定到可排序。

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

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.

回复收藏 0 原文