Question

我有一个div，而div又包含10个可拖动的div

<div id="doc">
  <div id"1" draggable="true"> lots of stuff here</div>
  <div id"2" draggable="true"> lots of stuff here</div>
  .........
</div>

在启用html5的浏览器中，我可以拖放这些div以更改顺序。当我检查DOM时，我可以看到整个div已按预期更改顺序，所有内容都保持不变。

到目前为止还没有一行javascript。

当发生掉落时，我想检查项目的新顺序，并能够对此作出反应。

我尝试过使用jquery

$('div').on('drop', function(){alert("test")});

无法让它发挥作用。我尝试了许多尝试捕捉此事件的不同方法，但我无法记住它们。

我不想让事情过于复杂。本机拖放正是我想要的。我可以有一个计时器或鼠标事件监听器来检查DOM中项目的顺序，但它让我感到沮丧，我无法捕获这个看似简单且已经在工作的活动。

对我做错了什么的想法？

Answer 1

在本文中，您可能会找到解决方案：Posible Solution 您需要为de event“dragend”创建一个监听器，并在此函数中检查属性dropEffect，如果为none，则取消拖动，否则它指定执行的操作。

如果您需要其他解决方案，我会使用Jquery UI，并且它的方法可拖动且可丢弃，这很容易使用。

Answer 2

我不知道这是否仍然相关。但@Vishkey给了我一个寻找docs的想法。

我有同样的问题。我可以捕获"drop"，但所有其他drap events都很好。似乎答案隐藏在下一段中：

当用户释放鼠标时，拖放操作结束。如果鼠标是在一个有效的放置目标元素上释放的，也就是说，那个取消了最后一个dragenter或dragover事件的人下降将成功，并且下降事件将触发目标。否则，将取消拖动操作，并且不会触发拖放事件。

因此，仔细观察后，我们发现只有当目标为valid drop target时才会触发掉落事件。如果我们再看一遍（这次更接近），我们就会看到

有效放弃目标，也就是说，取消了最后一个dragenter或dragover事件

因此，只有在event.preventDefault();或dragpover

上拨打dragenter时才需要做的唯一事情才能降低效果