jQuery UI Sortable，如何在更新事件中确定当前位置和新位置？

Question

我有：

<ul id="sortableList">
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
</ul>

我已经连接到 update: function(event, ui) { }，但不确定如何获取元素的原始位置和新位置。如果我将第三个项目移动到第一个项目上面，我希望原始位置是2（从0开始的索引），并且第三个项目的新位置是0。

- Amir

---

得票数最少的Richard提供的回答是最好且最简洁的解决方案，特别是当你在使用AngularJS或其他MVC框架时，你不想在控制器中读取自定义属性时。 - Nishanth Nair

Answer 1

$('#sortable').sortable({
    start: function(e, ui) {
        // creates a temporary attribute on the element with the old index
        $(this).attr('data-previndex', ui.item.index());
    },
    update: function(e, ui) {
        // gets the new and old index then removes the temporary attribute
        var newIndex = ui.item.index();
        var oldIndex = $(this).attr('data-previndex');
        $(this).removeAttr('data-previndex');
    }
});

- Rush Frisby

---

你可以使用 ui.item.data('previndex')。 - adamj

Answer 2

当调用更新函数时，ui.item.sortable尚未更新，但UI元素已经在视觉上移动了。
这使得您可以在更新函数中获取旧位置和新位置。

   $('#sortable').sortable({    
        update: function(e, ui) {
            // ui.item.sortable is the model but it is not updated until after update
            var oldIndex = ui.item.sortable.index;

            // new Index because the ui.item is the node and the visual element has been reordered
            var newIndex = ui.item.index();
        }    
});

- Richard Friedman

---

这是最好的答案和最干净的解决方案！谢谢Richard！ - Nishanth Nair

无法在jQuery 1.7和jQuery UI 1.8上运行 - 尽管这个解决方案听起来非常有前途。 - user1702401

具体来说：ui.item.sortable.index不存在；而ui.item.sortable().index()返回已经更新的索引。 - user1702401

对我来说，ui.item.sortable.index和ui.item.index()都返回相同的整数。我开始使用ui.item.sortable.dropindex来获取新索引。 - Mudassir Ali

Answer 3

您有几种可能检查旧位置和新位置。我会将它们放入数组中。

$('#sortable').sortable({
    start: function(e, ui) {
        // puts the old positions into array before sorting
        var old_position = $(this).sortable('toArray');
    },
    update: function(event, ui) {
        // grabs the new positions now that we've finished sorting
        var new_position = $(this).sortable('toArray');
    }
});

然后你可以轻松地提取你所需要的内容。

- Frankie

---

列表项必须具有ID，否则它将生成空数组。 - Atara

Answer 4

我正在寻找一个与之相同的问题的答案。根据Frankie所贡献的内容，我能够获得起始和结束“指令”。由于使用var时存在变量范围的问题，因此我将它们存储为.data()而不是本地变量：

$(this).data("old_position",$(this).sortable("toArray"))

并且

$(this).data("new_position",$(this).sortable("toArray"))

现在您可以像这样调用它（从更新/结束功能）：

console.log($(this).data("old_position"))
console.log($(this).data("new_position"))

功劳仍然归于Frankie :)

- jasonmcleod

Answer 5

这对我有用。

$('#sortable').sortable({
start: function(e, ui) {
    // puts the old positions into array before sorting
    var old_position = ui.item.index();
},
update: function(event, ui) {
    // grabs the new positions now that we've finished sorting
    var new_position = ui.item.index();
}
});

- nicmwenda

---

这对我有用！值得注意的是，如果您需要在update()中引用old_position，请在sortable之前声明它。 - nick

Answer 6

这对我有效，

$('#app').sortable({
    handle: '.handle',

    start: function(evt, ui){
        $(ui.item).data('old-ndex' , ui.item.index());
    },

    update: function(evt, ui) {
        var old_index = $(ui.item).data('old-ndex');
        var new_index = ui.item.index();

        alert('old_index -'+old_index+' new index -'+new_index);

    }
});

- lonestar