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

Question

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

这是场景.当我拖动div并将它们放到另一个地方时,我需要检索div的新顺序.例如,假设(关于我的样本),我在DIV 6之后拖放DIV 3.现在我正在尝试获得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放入新位置后获取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();
    }

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

然后在更新事件我正在调用你的函数Dropped

见例子