如何让 clientX 和 clientY 在 Firefox 上的“拖动”事件处理程序中工作？

Question

Mozilla Firefox 3.x 在侦听“ondrag”事件时似乎有一个错误。 事件对象不报告被拖动对象的位置， clientX 、 clientY和其他屏幕偏移都设置为零。

这是非常有问题的，因为我想根据被拖动的元素制作一个代理元素，当然，使用clientX和clientY来调整它的位置。

我知道有一些很酷的东西，比如 HTML5 中的setDragImage但我想为浏览器之间的原生 DD 提供一个通用的抽象。

错误代码：

document.addEventListener('drag', function(e) {
    console.log(e.clientX); // always Zero
}, false);

笔记：

此问题不会发生在其他事件（ dragstart 、 dragover ）上，并且在拖动某些内容时无法捕获mousemove事件。

Answer 1

我找到了一个解决方案，我在文档级别的“dragover”事件上放置了一个侦听器，现在我获得了可以通过全局共享对象公开的正确 X 和 Y 属性。

Answer 2

HTML 5 中的拖动事件在当今的浏览器中无法完全发挥作用。 要模拟拖放情况，您应该使用：

1. 添加一个 onmousedown 事件，将 var 设置为 true。
2. 添加一个 onmouseup 事件，将 var 设置为 false。
3. 添加一个 onmousemove 事件，检查该 var 是否为 true，如果是，则根据坐标移动 div。

这总是对我有用。 如果您遇到任何问题，请再次联系，我可以提供一些示例。

祝你好运！

Answer 3

我知道有一些很酷的东西，比如 HTML5 中的 setDragImage 但我想为浏览器之间的原生 DD 提供一个通用的抽象。

但是为什么要做这样的事情，难道没有像JQuery和Prototype这样的库可用于跨浏览器拖放？

或者，如果您想实现自己的 DD 库，您可以借助他们的方法或扩展它们，因为这两个库都遵循面向对象的范式。

这将节省很多时间。