[英]How do I get clientX and clientY to work inside my “drag” event handler on Firefox?
Mozilla Firefox 3.x seems to have a bug when listening to the "ondrag" event. Mozilla Firefox 3.x 在侦听“ondrag”事件时似乎有一个错误。 The event object doesn't report the position of the object being dragged,
clientX
, clientY
, and other screen offsets are all set to zero.事件对象不报告被拖动对象的位置,
clientX
、 clientY
和其他屏幕偏移都设置为零。
This is quite problematic as I wanted to make a proxy element based on the element being dragged and using of course, clientX
and clientY
to adjust its position.这是非常有问题的,因为我想根据被拖动的元素制作一个代理元素,当然,使用
clientX
和clientY
来调整它的位置。
I know that there's cool stuff around such as setDragImage
in HTML5 but I want to provide a generic abstraction for native DD between browsers.我知道有一些很酷的东西,比如 HTML5 中的
setDragImage
但我想为浏览器之间的原生 DD 提供一个通用的抽象。
Faulty code:错误代码:
document.addEventListener('drag', function(e) {
console.log(e.clientX); // always Zero
}, false);
Note:笔记:
This problem doesn't happen on other events ( dragstart
, dragover
) and the mousemove
events cannot be captured while dragging something.此问题不会发生在其他事件(
dragstart
、 dragover
)上,并且在拖动某些内容时无法捕获mousemove
事件。
我找到了一个解决方案,我在文档级别的“dragover”事件上放置了一个侦听器,现在我获得了可以通过全局共享对象公开的正确 X 和 Y 属性。
The drag event in HTML 5 is not fully functional in todays browsers. HTML 5 中的拖动事件在当今的浏览器中无法完全发挥作用。 To simulate a drag n drop situation you should use:
要模拟拖放情况,您应该使用:
This always worked for me.这总是对我有用。 If you face any problems, get in touch again, I can provide some examples.
如果您遇到任何问题,请再次联系,我可以提供一些示例。
good luck!祝你好运!
I know that there's cool stuff around such as setDragImage in HTML5 but I want to provide a generic abstraction for native DD between browsers.
我知道有一些很酷的东西,比如 HTML5 中的 setDragImage 但我想为浏览器之间的原生 DD 提供一个通用的抽象。
But why do something like this, aren't there libraries like JQuery & Prototype available for cross browser drag & drop?但是为什么要做这样的事情,难道没有像JQuery和Prototype这样的库可用于跨浏览器拖放?
Or else if you want to implement a DD library of your own, you can take help of their methods or extend them, as both the libraries are following object oriented paradigm.或者,如果您想实现自己的 DD 库,您可以借助他们的方法或扩展它们,因为这两个库都遵循面向对象的范式。
This will save much time.这将节省很多时间。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.