1

我正在做一个拖放项目。

如何：我正在使用 HTML5 拖动事件。
代码：请参见这里的小提琴
问题：它有时只能工作，我检查了代码一百万次

Idea:
- Get element and drag it over a div with id: LayerN (N=number)
- Create a new layer before LayerN when dropping
- AppendChild to new Layer.
- Remove empty layers if there are any.

我做错了什么或太复杂了吗？我不想使用 JQuery 框架，我想了解我在做什么。非常感谢您的阅读，任何帮助将不胜感激。

4

1 回答 1

0

我无法让你的小提琴工作，所以我给出一般性评论而不是完整的“答案”，所以希望它有所帮助！

对于 D&D，我发现最有效的方法是在页面加载时将 mousedown 事件附加到文档（或者如果更合适，则为可拖动对象的包含元素）。在这个阶段不要将任何事件附加到可拖动元素本身。

在 mousedown 上，检查目标的类名/id 以及它是否可拖动：

  • 如果要显示它的拖动，请克隆元素并附加到位置：固定或：绝对 DIV - 您可以相对于光标在 mousemove 上移动它。保持这个元素偏移到光标意味着您仍然可以检测到光标下的内容。

  • 隐藏您正在拖动的元素。如果您希望使用 insertBefore，您可以在此阶段放置某种图像来显示它的来源。

我隐藏元素而不是移动它，因为如果取消拖动，很容易恢复它。

将 mousemove 和 mouseup 事件附加到窗口或文档。你在 mousemove 上调用的函数可以根据 event.target/event.srcElement 来决定被拖动的对象是否可以被放下（同样，我通常在这里寻找一个类名）。

这样，您最多只能有两个事件侦听器运行所有内容，而不是每个元素上的多个事件。我怀疑您的事件侦听器可能会相互绊倒。

我不知道这是否能让你更进一步，但祝你好运！

于 2013-11-05T22:19:51.017 回答