javascript - 无需库帮助的简单 JavaScript 拖放

我只是在寻找一种无需 jquery 或任何其他库即可使用拖放的方法。如果拖动的对象被放置在另一个元素上，则后面的元素应该启动一个事件(在 FF 中 - 最好是独立于浏览器)。

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

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

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

这怎么可能？

提前谢谢了。

最佳答案

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

如果您坚持认为这是您需要做的:

将 onmousedown 事件绑定(bind)到要拖动的 div (div.onmousedown)。

改变div的位置样式为absolute (div.style.position = 'absolute')

开始捕捉鼠标移动(document.onmousemove)。

在鼠标移动时更新 div 的位置 (div.style.top|left = '[location]px')

在 div 的 onmouseup 事件(或文档的)上取消绑定(bind)所有处理程序并执行任何其他清理(空出位置更改等)。

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

拖动时您将选择页面上的文本(看起来很难看)。

对事件的绑定(bind)因浏览器而异。

如果要显示占位符，并在开始拖动控件时使其不“弹出”，则必须计算被拖动元素的大小(因为更改为绝对定位将从流中删除元素)。

您可能希望被拖动的元素流畅地移动，因此您必须在选择元素时存储一些鼠标偏移量或自动将元素居中到鼠标。

如果你想在列表中拖动一个项目，你必须为该列表编写更多的自定义代码来接受拖动的项目。

您必须考虑在滚动窗口时拖动以及可能在其他位置奇怪的元素内拖动。

关于javascript - 无需库帮助的简单 JavaScript 拖放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/863998/