5

我已将样品放在以下位置：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 顺序？

4

2 回答 2

8

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

我已经更改为使用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();
    }

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

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

查看示例

于 2013-02-01T16:18:18.797 回答
3

draggable 的问题在于它所做的只是在空闲空间中移动项目，而不关心排序。Droppable 可以提供帮助，但更关心的是确定对象是否在容器内。

尝试使用sortable，而不是使用 draggable 和 droppable 。它使诸如设置项目排序顺序之类的事情变得非常简单。这样，您也不必再担心它是否符合正确的顺序。

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

于 2013-02-01T16:14:54.013 回答