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

Question

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

这很麻烦，因为我想基于被拖动的元素制作代理元素，并且当然要使用clientX和clientY来调整它的位置。

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

错误的代码：

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

注意：

这个问题不会在其他事件（dragstart，dragover）上发生，并且 mousemove 事件在拖动物品时无法被捕获。

- Christophe Eblé

---

你留下的评论我点了个赞。你可以使用José提供的答案。我也会尽快找到相关信息。 - Kirtan

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

在我看来，同样的 bug 存在于 Firefox 10。pageX 和其他坐标属性也是如此。如果它不应该是事件的一部分，那么它应该是未定义的，而不是零，对吧？这非常令人恼火。很抱歉听到你必须使用 dragover 事件作为 hack，但至少它确实有效。 - Chris Bosco

这个回答解决了你的问题吗？在Firefox的拖放事件中没有e.clientX或e.clientY的拖放指令，只能通过拖放指令来实现。 - Oleg Valter is with Ukraine

Answer 1

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

- Christophe Eblé

Answer 2

HTML 5中的拖动事件在今天的浏览器中并不完全功能齐备。为了模拟拖放操作，您应该使用以下方法：

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

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

祝你好运！

- José Leal

---

当鼠标按下时，onmousemove事件不会触发。 - Teo Mihaila

Answer 3

我知道HTML5中有setDragImage等很酷的东西，但我想为浏览器之间提供一个通用的本地DD抽象。

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

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

这将节省大量时间。

- Kirtan

---

JQuery和Prototype只提供模拟的D&D，这不是我要找的，本地DD比任何其他模拟解决方案更强大和快速。 - Christophe Eblé