拖放时获取元素在列表中的位置（ui.sortable）

Posted 2023-05-08

【中文标题】拖放时获取元素在列表中的位置（ui.sortable）

【英文标题】：Getting the position of the element in a list when it's drag/dropped (ui.sortable)

【发布时间】：2011-01-27 09:16:31

【问题描述】：

我有一个这样的可排序列表：http://jqueryui.com/demos/sortable

当它被移动时，是否可以获得列表中元素的开始和结束位置？我说的是他们的职位编号，在列表中。

例如，如果我将元素 2 移动到列表中的位置 5，我想将这两个数字分配给变量。

我是 jQuery 新手 - 任何帮助将不胜感激。

【问题讨论】：

这是 jQuery UI 糟糕的 API 设计的一个很好的例子

【参考方案1】：

演示： http://so.lucafilosofi.com/getting-the-position-of-the-element-in-a-list-when-its-drag-dropped-ui-sortable/

解决方案：

$(function() 
    $('ul#sortable').sortable(
        start: function(event, ui) 
            var start_pos = ui.item.index();
            ui.item.data('start_pos', start_pos);
        ,
        update: function(event, ui) 
            var start_pos = ui.item.data('start_pos');
            var end_pos = ui.item.index();
            alert(start_pos + ' - ' + end_pos);
        
    );
);

注意： 在Alconja 的建议下更新以使用jQuery data() 方法

【讨论】：

+1 不错的简洁答案，但您不需要包装 ui.item，它已经是一个 jQuery 对象。所以不要使用$(ui.item)，而是使用ui.item

优雅的答案！太感谢了。我想 ui.item 对象就是我要找的，在这里。

+1，尽管您可能应该在start 中使用ui.item.data('start_pos', start_pos); 和在update 中使用var start_pos = ui.item.data('start_pos');，而不是污染id。

【参考方案2】：

我相信您想要做的是使用serialize method。序列化是获取列表的新顺序。

【参考方案3】：

由于某种原因，ui.item.index() 对我不起作用。

这样做了：

update: function (event, ui) 

    var index = $('li', $(ui.item).parent()).index(ui.item);
    alert(index);