0

我有一个 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")});

无法让它工作。我尝试了许多不同的方法来尝试捕捉这个我无法全部记住的事件。

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

关于我做错了什么有什么想法吗？

4

2 回答 2

0

我不知道这是否仍然相关。但@Vishkey 给了我寻找一些docs.

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

当用户释放鼠标时，拖放操作结束。如果鼠标在有效放置目标的元素上释放，即取消最后一个 dragenter 或 dragover 事件的元素，则放置将成功，并且将在目标上触发放置事件。否则，拖动操作将被取消，并且不会触发任何放置事件。

所以仔细观察后，我们看到只有当目标是 时才会触发 drop 事件valid drop target。如果我们再看一遍（这次更近了），我们会看到

有效的放置目标，即取消最后一个 dragenter 或 dragover 事件的目标

所以为了只降低效果，唯一要做的就是调用或event.preventDefault();打开dragpoverdragenter

于 2014-07-24T15:33:54.113 回答
0

在这篇文章中，您可能会找到解决方案： 可能的解决方案 您需要为 de 事件“dragend”创建一个侦听器，并在此函数中检查属性 dropEffect，如果没有，则取消拖动，否则指定执行的操作。

如果你想要其他解决方案，我建议使用 Jquery UI，它的方法是可拖放的，这很容易使用。

于 2013-09-25T02:09:42.443 回答