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功能，因为您使用了可拖动唯一的药物而非排序元素。

当您使用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

Answer 2

关于可拖动的问题是它所做的只是在自由空间中移动物品而不关心订购。 Droppable可以提供帮助，但更关心的是弄清楚对象是否在容器内。

尝试 sortable ，而不是使用draggable和droppable。它使得设置项目的排序顺序非常简单。那你和你不再需要担心它符合正确的顺序。

看看这个：http://jsbin.com/axegem/6/

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

2 个答案: