如何讓 clientX 和 clientY 在 Firefox 上的“拖動”事件處理程序中工作？

Question

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

Answer 1

我找到了一個解決方案，我在文檔級別的“dragover”事件上放置了一個偵聽器，現在我獲得了可以通過全局共享對象公開的正確 X 和 Y 屬性。

Answer 2

HTML 5 中的拖動事件在當今的瀏覽器中無法完全發揮作用。 要模擬拖放情況，您應該使用：

1. 添加一個 onmousedown 事件，將 var 設置為 true。
2. 添加一個 onmouseup 事件，將 var 設置為 false。
3. 添加一個 onmousemove 事件，檢查該 var 是否為 true，如果是，則根據坐標移動 div。

這總是對我有用。 如果您遇到任何問題，請再次聯系，我可以提供一些示例。

祝你好運！

Answer 3

我知道有一些很酷的東西，比如 HTML5 中的 setDragImage 但我想為瀏覽器之間的原生 DD 提供一個通用的抽象。

但是為什么要做這樣的事情，難道沒有像JQuery和Prototype這樣的庫可用於跨瀏覽器拖放？

或者，如果您想實現自己的 DD 庫，您可以借助他們的方法或擴展它們，因為這兩個庫都遵循面向對象的范式。

這將節省很多時間。