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

Posted 2021-04-20

Mozilla firefox 3.x在收听“ondrag”事件时似乎有一个bug。事件对象不报告被拖动对象的位置，clientX，clientY和其他屏幕偏移都设置为零。这是非常有问题的，因为我想根据被拖动的元素创建一个代理元素，当然使用clientX和clientY来调整它的位置。

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

错误的代码：

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

注意：此问题不会发生在其他事件（dragstart，dragover）上，拖动某些事件时无法捕获mousemove事件。

请帮忙 ！

答案

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

另一答案

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

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

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

祝好运！

另一答案

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

但为什么这样的事情，是不是像JQuery和Prototype这样的库可用于跨浏览器的拖放？

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

这将节省很多时间。