简单的JavaScript拖放,无需借助库

Question

我只是在寻找一种在没有jquery或任何其他库的情况下使用拖放的方法.如果拖动的对象被放在另一个元素上,则后面的元素应该启动一个事件(在FF中 - 更好的是与浏览器无关).

我知道之前有时会讨论JavaScript的拖放,但以前的帖子对我没有帮助.

虽然我发现了一些例子但我不清楚是否存在"掉落"或"拖拉"事件,但这些事情不起作用:

<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事件(或文档)上取消绑定所有处理程序并执行任何其他清理(null out position changes,etc).

库可能解决的一些问题:

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