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

Posted 2023-02-24

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

【英文标题】：jQuery UI Sortable, how to determine current location and new location in update event?

【发布时间】：2010-12-08 18:42:06

【问题描述】：

我有：

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

我已连接到update: function(event, ui) ，但不确定如何获取元素的原始位置和新位置。如果我将第 3 项移动到第 1 项上方，我希望原始位置为 2（基于 0 的索引），第 3 项的新位置为 0。

【问题讨论】：

Richard 给出的最后一个投票数最少的答案是最好和最干净的解决方案，尤其是当您使用 AngularJS 或任何其他不想在控制器中读取自定义属性的 MVC 框架时！

【参考方案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');
    
);

【讨论】：

你也可以使用ui.item.data('previndex')

【参考方案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();
            
);

【讨论】：

这是最好的答案和最干净的解决方案！谢谢理查德！

不适用于 jQuery 1.7、jQuery UI 1.8 - 虽然这个解决方案听起来很有希望

具体来说：ui.item.sortable.index 不存在；并且 ui.item.sortable().index() 返回所有已更新的索引。

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

【参考方案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');
    
);

然后您可以轻松提取所需的内容。

【讨论】：

列表项必须有 ID。否则会生成空数组

【参考方案4】：

我正在寻找相同问题的答案。根据弗兰基的贡献，我能够同时获得开始和结束的“订单”。我在使用 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 :)

【参考方案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();

);

【讨论】：

这对我有用！值得注意的是，如果您需要在 update() 中引用 old_position，只需在可排序之前声明它即可。

【参考方案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);

    
);