web-dev-qa-db-ja.com

HTML5：dragover（）、drop（）：現在のx、y座標を取得するにはどうすればよいですか？

HTML5 DnDで「ドラッグオーバー」をドラッグしている間、およびドロップ（「ドロップ」）した後、（x、y）座標をどのように決定しますか？

ドラッグオーバーのx、yについて説明しているWebページを見つけました（e.offsetXとe.layerXを見て、さまざまなブラウザーに設定されているかどうかを確認しますが、私の人生では設定されていません）。

Drop（e）関数を使用して、現在のドロップターゲットのどこで実際にドロップされたかを確認しますか？

私はオンライン回路設計アプリを書いていますが、ドロップターゲットが大きいです。

X、yを見つけるためにマウスレベルにドロップダウンする必要がありますか、それともHTML5がより高いレベルの抽象化を提供しましたか？

drag-and-drophtml
20
Pete Alvin

プロパティclientXおよびclientYを設定する必要があります（最新のブラウザの場合）。

function drag_over(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}
function drop(event) {
    console.log(event.clientX);
    console.log(event.clientY);
    event.preventDefault();
    return false;
}

これは（やや）実用的な例です FirefoxとChromeで動作します。

24
robertc

Robertcの回答に基づいて構築し、問題を回避するには：

ClientXとclientYは、ドロップされた要素の左上隅からのカーソルの距離に比例して不正確になります。

dragStartに記録されたクライアント座標からdragEndに記録されたクライアント座標を引くことにより、デルタ距離を簡単に計算できます。ドロップされた要素は、dragEndでまったく同じ位置にあることに注意してください。これは、デルタ距離で更新して、新しい左右の位置座標を取得できます。

これが demo in reactですが、プレーンJSでも同じことができます。

0
Mateja Petrovic