跟踪 jQuery 可排序中所有元素的位置

Question

我试图弄清楚如何跟踪 jQuery 中的元素如何排序。 假设我的可排序中有四个元素（div），每个元素都有一个唯一的 id。我们将它们称为#100、#200、#300 和#400，它们首先按此顺序呈现。但是，当我将 #1​​00 移动到 3 号位置时，我需要能够保存该 id 的新位置，同时还要确保其他位置也获得更新的位置值。

我说得有道理吗？基本上我想获取每个唯一 id 的位置，这样我就可以保存列表的顺序以供以后使用。

我无法找到可排序的所有元素的报告，仅针对已移动的元素。

请为我指出正确的方向？ 谢谢

Answer 1

您可以使用 sortable 中提供的停止事件来跟踪项目。这是一个小例子；

(function($) {
    $('#sortable').sortable({
        stop: function(e, ui) {
            console.log($.map($(this).find('li'), function(el) {
                return el.id + ' = ' + $(el).index();
            }));
        }
    });
})(jQuery);

这会记录可排序中所有项目的数组及其 id 和当前索引。

这里还有一个 jsfiddle 的工作示例： http://jsfiddle.net/beyondsanity/HgDZ9/

Answer 2

根据文档 http://api.jqueryui.com/sortable/#method-toArray 我建议你使用内置方法toArray。
例子：

  $(document).ready(function() {
    $('#sortable').sortable({
      stop: function(e, ui) {
        console.log($('#sortable').sortable('toArray'));
      }
    });
    $('#sortable').disableSelection();
  });

Answer 3

jQuery UI 可排序位置 可能重复。

基本上，要获取可排序元素（或只是普通的旧父元素）中元素的位置，只需类似以下内容：

$('#300').index();

如果没有移动任何内容，则此代码将返回 2（index() 从零开始计数），并在元素重新排列时更新。

这是一个演示：http://jsfiddle.net/XB5Dh/。您可以单击某个元素来查看其位置，拖动元素时会显示新位置。