如何在用户移动元素时使用 jQuery sortable 来更新 div ID？

Question

我正在使用 jQuery sortable 以允许用户在页面上四处移动元素。每个 div 元素都有一个唯一的 ID。当用户将页面上的一个元素与另一个元素交换时，我还想交换这些元素 ID 并提醒新的 ID 顺序列表，这样我就可以将这个新顺序保存到后端。

我正在努力获取用户移动元素时的子元素 ID。我的 jQuery 到目前为止是：

  $(function() {
    $("#sortable").sortable({
      stop: function(ev, ui) {
        var children = $('#sortable').sortable('refreshPositions').children();
        alert('Positions: ');
        $.each(children, function() {
            alert($(this).attr('id'));
        });
      }
    });
    $("#sortable").disableSelection();
    var drag_id = $('.container').attr("id");
  });

但警报消息始终是 undefined。如何在用户进行更改时交换 div ID，并将其保存到一个数组，然后 alert 这个数组？

FIDDLE

Answer 1

以下代码对您有帮助吗？

$(function() {
  $("#sortable").sortable({
    stop: function(ev, ui) {
      var children = $('#sortable').sortable('refreshPositions').find(".container");

      $.each(children, function() {
        alert($(this).attr('id'));
      });
    }
  });
  $("#sortable").disableSelection();
  var drag_id = $('.container').attr("id");
});

Answer 2

您必须为 li 标签设置 ID：

$(function() {
    $("#sortable").sortable({
      stop: function(ev, ui) {
        var children = $('#sortable').sortable('refreshPositions').children();
        alert('Positions: ');
        $.each(children, function() {
          alert($(this).attr('id'));
        });
      }
    });
    $("#sortable").disableSelection();
    var drag_id = $('.container').attr("id");
});

现在检查Fiddle：

Fiddle