当用户移动元素时，如何使用 jQuery 可排序来更新 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。当用户进行更改并将其保存到数组然后alert此数组时，如何交换 div ID？

FIDDLE

Answer 1

你必须为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

Answer 2

下面的代码还是会有所帮助？

$(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");
});