Jquery ui jQuery UI可排序，如何确定更新事件中的当前位置和新位置？

我有：

项目1
项目2
项目3

---

我已经连接到

update:function（event，ui）{}

中，但不确定如何获得元素的原始和新位置。如果我将项目3移动到项目1上方，我希望原始位置为2（基于0的索引），项目3的新位置为0

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

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

---

然后你就可以很容易地提取你需要的东西。

我一直在寻找同一问题的答案。根据Frankie的贡献，我能够获得开始和结束的“订单”。我在使用变量作用域时遇到了一个问题，所以我只是将它们存储为.data（）而不是本地变量：

$('#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：）

调用更新功能时，ui.item.sortable尚未更新，但ui元素已在视觉上移动。
这允许您在更新功能中获取旧位置和新位置

$('#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');
    }
});

这对我有用

   $('#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();
        }    
});

这对我有用

$('#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();
}
});

---

这是最好的答案和最干净的解决方案！谢谢你，理查德！在jQuery1.7和jQueryUI1.8上不起作用-尽管这个解决方案听起来很有希望是具体的：UI.item.sortable.index不存在；和ui.item.sortable（）.index（）返回所有已更新的索引。对于我来说，

ui.item.sortable.index

&

ui.item.index（）

都返回相同的整数。我开始使用

ui.item.sortable.dropindex

来获得新的索引Richard的最后一个答案是最简单的解决方案，尤其是当您使用AngularJS或任何其他MVC框架时，您不想读取控制器中的自定义属性！这对我有用！值得注意的是，如果需要引用update（）中的旧位置，只需在可排序之前声明它。您可以使用

ui.item.data（'previndex'）

alsolist项必须具有ID。否则会生成空数组

$('#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');
    }
});

   $('#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();
        }    
});

$('#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();
}
});

$('#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);

    }
});