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

【问题标题】：How do I get clientX and clientY to work inside my "drag" event handler on Firefox?如何让 clientX 和 clientY 在 Firefox 上的“拖动”事件处理程序中工作？
【发布时间】：2009-05-20 11:04:13
【问题描述】：

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 事件。

【问题讨论】：

+1 表示您留下的评论。您可以使用 José 提供的答案。一旦有时间，我也会尝试找出与此相关的内容。
我找到了一个解决方案，我在文档级别的“dragover”事件上放置了一个侦听器，现在我获得了可以通过全局共享对象公开的正确 X 和 Y 属性。
相同的错误（在我看来）通过 Firefox 10 出现。pageX 和其他坐标属性也是如此。如果它不应该是这个事件的一部分，它应该是未定义的，而不是零，对吧？这很烦人。很遗憾听到您必须使用 dragover 事件作为黑客，但至少它确实有效
这能回答你的问题吗？ Drag and drop directive , no e.clientX or e.clientY on drag event in FireFox

标签： javascript events drag-and-drop firefox-3

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

祝你好运！

【讨论】：

鼠标按下时onmousemove事件没有触发

【解决方案3】：

我知道周围有很酷的东西例如 HTML5 中的 setDragImage 但我想要提供一个通用的抽象用于浏览器之间的原生 DD。

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

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

这样可以节省很多时间。

【讨论】：

JQuery 和 Prototype 只是提供模拟的 D&D，这不是我想要的，原生 DD 比任何其他模拟解决方案都更加健壮和快速。