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

Question

我想弄清楚如何跟踪jQuery中元素的排序方式。假设我的排序表中有四个元素(div)，每个元素都有一个惟一的id。我们把它们命名为#100，#200，#300和#400，它们按照开始的顺序呈现。但是当我将#100移动到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()从0开始计数)，并在元素重新排列时更新。

这里有一个演示:http://jsfiddle.net/XB5Dh/。您可以单击一个元素来查看它的位置，并且当您拖动一个元素时将显示新的位置。