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

INT*_*INT 13 jquery jquery-ui jquery-ui-sortable

我试图找出如何跟踪jQuery中的元素如何排序.假设我的sortable中有四个元素(div),每个元素都有一个唯一的id.我们称它们为#100,#200,#300和#400,它们按顺序出现以开始.但是当我移动#100让我们说第3点时,我需要能够保存这个id的新位置,同时也要确保其他人获得更新的位置值.

我有意义吗?基本上我想得到每个唯一ID的位置,所以我可以保存列表的顺序供以后使用.

我无法找到报告可排序中所有元素的内容,只是针对被移动的元素.

指出我正确的方向?谢谢

Jes*_*rud 33

您可以使用提供给您的停止事件进行排序以跟踪项目.这是一个小例子;

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

这会记录sortable中所有项目的数组及其ID和当前索引.

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


jma*_*eli 5

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

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