jquery - 在 JQuery 中拖放事件后返回元素的新顺序

Question

我已将样本放置在以下位置:http://jsbin.com/axegem/1

这是场景。当我将 div 拖放到另一个位置时，我需要检索 div 的新顺序。例如，假设(就我的示例而言)，我将 DIV 3 拖放到 DIV 6 之后。现在我正在尝试获取 div 的新顺序。为了进行测试，我在以下代码中警告他们的 html 文本:

$(".draggable").each(function(){
  alert($(this).html());
});

我期望警报顺序为:DIV 1、DIV 2、DIV 4、DIV 5、DIV 6、DIV 3、DIV 7、DIV 8、DIV 9。但我在样本中得到的是DIV 1、DIV 2、DIV 3、DIV 4、DIV 5、DIV 6、DIV 7、DIV 8、DIV 9。

将 div 放置到新位置后如何获取它们的新顺序？

Answer 1

我对您的代码做了一些更改以满足您的需求。

我已更改为使用 Sortable功能，那是因为您使用了draggable唯一不排序的元素。

当你使用Sortable时，将很容易获得排序后的元素

$(document).ready(function() {
    $('#divOuter2').css("margin","-540px 0 0 400px");
    $('#divOuter3').css("margin","-540px 0 0 800px");

    $(".droppable").sortable({
      update: function( event, ui ) {
        Dropped();
      }
    });



  });



    function Dropped(event, ui){
      $(".draggable").each(function(){
        //var p = $(this).position();
        alert($(this).html());
      });
      refresh();
    }

我已将 .droppable 类的 DOM 元素设置为可排序。

然后Update我正在调用您的函数的事件 Dropped

See Example