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

【问题标题】：Return a new order of the elements after a drag and drop event in JQuery在 JQuery 中的拖放事件之后返回元素的新顺序
【发布时间】：2013-02-01 15:21:35
【问题描述】：

我已将样品放在以下位置：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的位置，没有改变顺序。我推荐使用.sortable()，因为您已经在使用 jQuery。 jqueryui.com/sortable/#connect-lists
旁注：请使用console.log() 而不是alert()。看到 30 个警报让我想打人的脸。 stackoverflow.com/questions/4743730/…
我只是用它来测试。我会用你的建议。谢谢你。

标签： jquery jquery-ui drag-and-drop jquery-ui-sortable

【解决方案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

【讨论】：

感谢您的投入。我必须将我的整个逻辑从可拖放/可拖放更改为可排序。我在这里比 msdn 博客更快地得到了解决方案。
我在处理这个问题时有点困惑。我的 Dropped() 函数在这里调用了两次：jsbin.com/axegem/15
我查看了您的代码，但看不到它在哪里调用了两次。我错过了什么吗？
我在 IE 和 firefox 中都试过了。当我拖放一个 DIV 时，我可以看到两次“Dropped”警报。
@armen - 看看这个链接api.jqueryui.com/sortable/#option-handle你可以使用句柄来实现这一点

【解决方案2】：

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

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

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

【讨论】：