clientX と clientY を Firefox の「ドラッグ」イベント ハンドラー内で動作させるにはどうすればよいですか?

Question

Mozilla Firefox 3.x には、「ondrag」イベントをリッスンするときにバグがあるようです。イベント オブジェクトはドラッグされているオブジェクトの位置を報告しません。clientX、clientY、およびその他の画面オフセットはすべて 0 に設定されます。ドラッグされている要素に基づいてプロキシ要素を作成し、もちろん clientX と clientY を使用してその位置を調整したいと考えていたため、これは非常に問題です。

HTML5 の setDragImage などの優れた機能があることは知っていますが、ブラウザ間のネイティブ DD に汎用の抽象化を提供したいと考えています。

欠陥のあるコード:

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

注記 ：この問題は他のイベント (dragstart、dragover) では発生せず、何かをドラッグしている間は Mousemove イベントをキャプチャできません。

助けてください ！

Answer 1

私は解決策を見つけ、私は今、私は私がグローバルに共有オブジェクトを介して公開することができます右のXとYプロパティを取得、ドキュメントレベルで「のdragover」イベントにリスナーを置いてきました。

Answer 2

HTML 5 のドラッグ イベントは、現在のブラウザでは完全には機能しません。ドラッグ アンド ドロップの状況をシミュレートするには、次を使用する必要があります。

1. onmousedown イベントを追加し、var を true に設定します。
2. onmouseup イベントを追加し、var false を設定します。
3. onmousemove イベントを追加して、その var が true かどうかを確認し、true であれば、座標に従って div を移動します。

これは常に私にとってうまくいきました。問題が発生した場合は、再度ご連絡ください。いくつかの例を示します。

幸運を！

Answer 3

  

私は周りのクールなものがあることを知っています   このようHTML5でsetDragImageによってように私   一般的な抽象化を提供したいです   ブラウザ間ネイティブDD用ます。

しかし、なぜこのようなものは、 jQueryのの＆<のhref = "HTTPのようにそこにライブラリされていませんか。 //www.prototypejs.org/」のrel = "nofollowをnoreferrer" クロスブラウザのドラッグ＆ドロップ？

について>プロトタイプで利用可能

それとも他にあなたがあなた自身のDDライブラリを実装する場合の両方のライブラリは、オブジェクト指向のパラダイムに従っているとして、あなたは、そのメソッドの助けを取るか、またはそれらを拡張することができます。

これは、多くの時間を節約します。