我正在开发一个拖放项目。
如何实现:我正在使用 HTML5 拖动事件。
代码:参见 fiddle here
问题:它只是有时有效，我检查了代码一百万次
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 框架，我想了解我在做什么。非常感谢您的阅读，我们将不胜感激任何帮助。
最佳答案
我无法让你的 fiddle 工作，所以我给出的是一般性评论，而不是完整的“答案”，所以希望它有所帮助!
对于 D&D，我发现最有效的方法是在页面加载时将 mousedown 事件附加到文档(或者可拖动对象的包含元素，如果更合适的话)。 在此阶段，不要将任何事件附加到可拖动元素本身。
在鼠标按下时，检查目标的类名/ID 以及它是否可拖动:
如果您想显示其拖动，请克隆该元素并附加到位置:固定或:绝对 DIV - 您可以在 mousemove 上相对于光标移动它。保持此元素相对于光标的偏移意味着您仍然可以检测光标下方的内容。
隐藏您正在拖动的元素。如果您希望使用 insertBefore，您可以在此阶段放置某种显示其来源的图像。
我隐藏元素而不是移动它，因为如果取消拖动，很容易恢复它。
将 mousemove 和 mouseup 事件附加到窗口或文档。你在 mousemove 上调用的函数可以根据 event.target/event.srcElement 来决定拖动的对象是否可以被删除(同样，我通常在这里寻找一个 className)。
这样，您最多只能有两个事件监听器来运行所有内容，而不是在每个元素上运行多个事件。我怀疑您的事件监听器可能会互相绊倒。
我不知道这是否能让你更进一步，但祝你好运!
关于javascript - HTML5 使用 insertBefore 进行拖放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19799077/