Mozilla firefox 3.x seems to have a bug when listening to "ondrag" event. The event object doesn't report the position of the object being dragged, clientX, clientY and other screen offsets are all set to zero. 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.
Mozilla firefox 3.x在收听“ondrag”事件时似乎有一个bug。事件对象不报告被拖动对象的位置,clientX,clientY和其他屏幕偏移都设置为零。这很成问题,因为我想根据被拖动的元素创建一个代理元素,当然使用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 somethin'.
注意:此问题不会发生在其他事件(dragstart,dragover)上,拖动某些事件时无法捕获mousemove事件。
Please help !
请帮忙 !
3 个解决方案
#1
I found a solution, I've placed a listener on the "dragover" event at the document level, now I get the right X and Y properties that I can expose through a globally shared object.
我找到了一个解决方案,我在文档级别的“dragover”事件中放置了一个监听器,现在我获得了可以通过全局共享对象公开的正确的X和Y属性。
#2
The drag event in HTML 5 is not fully functional in todays browsers. To simulate a drag n drop situation you should use:
HTML 5中的拖动事件在当今的浏览器中并不完全正常。要模拟拖放情况,您应该使用:
- Add a onmousedown event, setting a var true.
- Add a onmouseup event, setting that var false.
- Add a onmousemove event, checking if that var is true, and if it is, move your div according to the coordinates.
添加onmousedown事件,设置var true。
添加onmouseup事件,将var设置为false。
添加一个onmousemove事件,检查该var是否为true,如果是,则根据坐标移动div。
This always worked for me. If you face any problems, get in touch again, I can provide some examples.
这总对我有用。如果您遇到任何问题,请再次联系,我可以提供一些示例。
good luck!
#3
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.
这将节省很多时间。
#1
I found a solution, I've placed a listener on the "dragover" event at the document level, now I get the right X and Y properties that I can expose through a globally shared object.
我找到了一个解决方案,我在文档级别的“dragover”事件中放置了一个监听器,现在我获得了可以通过全局共享对象公开的正确的X和Y属性。
#2
The drag event in HTML 5 is not fully functional in todays browsers. To simulate a drag n drop situation you should use:
HTML 5中的拖动事件在当今的浏览器中并不完全正常。要模拟拖放情况,您应该使用:
- Add a onmousedown event, setting a var true.
- Add a onmouseup event, setting that var false.
- Add a onmousemove event, checking if that var is true, and if it is, move your div according to the coordinates.
添加onmousedown事件,设置var true。
添加onmouseup事件,将var设置为false。
添加一个onmousemove事件,检查该var是否为true,如果是,则根据坐标移动div。
This always worked for me. If you face any problems, get in touch again, I can provide some examples.
这总对我有用。如果您遇到任何问题,请再次联系,我可以提供一些示例。
good luck!
#3
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.
这将节省很多时间。