无需库帮助的简单 JavaScript 拖放

Question

我只是在寻找一种在没有 jquery 或任何其他库的情况下使用拖放的方法。如果将拖动的对象放在另一个元素上，则后面的元素应该启动一个事件（在 FF 中 - 最好是独立于浏览器）。

我知道以前有时讨论过 JavaScript 的拖放，但之前的帖子对我没有帮助。

虽然我找到了一些示例，但我不清楚是否存在“drop”或“dragdrop”事件，但这些事情不起作用：

<p ondrop='alert("It worked");'>Text</p>
<p ondragdrop='alert("It worked");'>Text</p>

这是怎么做到的？

非常感谢。

Answer 1

我同意其他答案。图书馆将为您节省大量时间和头痛。这是来自最近从头开始创建拖放控件的人。

如果你坚持，尽管这是你需要做的：

1. 将 onmousedown 事件绑定到要拖动的 div (div.onmousedown)。
2. 将 div 的位置样式更改为绝对 (div.style.position = 'absolute')
3. 开始捕捉鼠标移动 (document.onmousemove)。
4. 鼠标移动时更新 div 的位置 (div.style.top|left = '[location]px')
5. 在 div 的 onmouseup 事件（或文档的）上，取消绑定所有处理程序并进行任何其他清理（空出位置更改等）。

图书馆可能会解决的一些问题：

1. 拖动时，您将选择页面上的文本（看起来很难看）。
2. 不同浏览器的事件绑定是不同的。
3. 如果要显示占位符并使其在开始拖动控件时不“弹出”，则必须计算被拖动元素的大小（因为更改为绝对定位会从流中删除元素）。李>
4. 您可能希望被拖动的元素能够流畅地移动，因此您必须在选择元素时存储一些鼠标偏移量或自动将元素置于鼠标的中心。
5. 如果要拖动列表中的项目，则必须为该列表编写大量自定义代码才能接受拖动的项目。
6. 您必须考虑在滚动窗口时进行拖动，并可能在其他位置奇怪的元素内进行拖动。

Answer 2

我只是在寻找一种在没有 jquery 或任何其他库的情况下使用拖放的方法。

对不起，没有任何库就没有简单的拖放这样的事情。你可以自己写，但要让它在所有浏览器中工作，需要大量的 JS。

Answer 3

嗯。你想自己做可能不是那么简单，但我会看一下 Peter Michaux 的 FORK Javascript drag and drop library - 与 JQuery 或所有那些大型库不同，FORK 的模块是相互分离的，并且足够简单以至于您可能可以查看 Peter 的源代码并找出您需要的位。 （编辑：我只使用 FORK.Drag，因为它非常小：总共缩小了 7.6KB）

Answer 4

虽然我同意图书馆是要走的路，但您想要的答案是 onmousedown、onmousemove、onmouseup。你必须处理这三个事件。

在 onmousedown 中，您会找到目标（不同浏览器中的 event.target 或类似内容）并设置 draggedObject = event.target。您还将开始处理 onmousemove 事件。

每当 onmousemove 事件触发时，您将根据自上次触发 onmousemove 事件以来的位置差异来移动拖动的元素。

在 onmouseup 事件中，您将清除 draggedObject 变量并停止处理 onmousemove。

它不是很好的跨浏览器，但它是拖放操作的核心。