1. ホーム
  2. javascript

dragenter & dragover イベントからドラッグされているものを判断する。

2023-08-30 11:51:40

質問

HTML5のドラッガブルAPIを使おうとしているのですが、(わかってはいるのですが には問題があります。 ). 今のところ、私が遭遇した唯一の問題点は、ドラッグされたものを判断する方法がわからないことです。 dragover または dragenter イベントが発生します。

el.addEventListener('dragenter', function(e) {
  // what is the draggable element?
});

を発射するのは最後の要素だと仮定できることに気づきました。 dragstart イベントを発生させる最後の要素であると仮定することはできますが、... マルチタッチです。を使うことも試しましたが e.dataTransfer.setData から dragstart を使って一意な識別子を付けていましたが、どうやらそのデータは にアクセスできないようです。 から dragover / dragenter :

このデータは、ドロップイベント中に一度でもドロップが発生した場合にのみ利用可能となります。

では、何かアイデアはありますか?

更新しました。 この記事を書いている時点では、HTML5 ドラッグ&ドロップは主要なモバイルブラウザには実装されていないようで、マルチタッチに関する指摘は実際には無意味なものです。しかし、私は、どのような実装の 仕様の の実装全体にわたって動作することが保証されるソリューションを希望します。これは、複数の要素を同時にドラッグすることを排除していないように見えます。

私が投稿した 作業ソリューション を投稿しましたが、これは醜いハックです。私はまだ、より良い答えを期待しています。

どのように解決するのですか?

私の質問に対する簡潔な答えが判明しました。いいえ。 WHATWG 仕様 は、ドラッグされる要素 (仕様では "source node" と呼ばれます) への参照を dragenter , dragover または dragleave というイベントがあります。

なぜダメなのか?理由は2つあります。

まず、ジェフェリーが指摘するように のコメント で Jeffery が指摘しているように、WHATWG 仕様は IE5+ のドラッグ アンド ドロップの実装に基づいており、これはマルチタッチ デバイスよりも先行しています。(この記事を書いている時点では、主要なマルチタッチ ブラウザは HTML ドラッグ アンド ドロップを実装していません)。シングルタッチのコンテキストでは、現在ドラッグされている要素へのグローバルなリファレンスを dragstart .

次に、HTML のドラッグ&ドロップでは、複数のドキュメントにまたがって要素をドラッグすることができます。これは素晴らしいことですが、それは同時に、ドラッグされる要素への参照をすべての dragenter , dragover または dragleave イベントは意味をなさないでしょう; 別のドキュメントの要素を参照することはできません。これらのイベントが、ドラッグが同じドキュメントで発生したか、異なるドキュメントで発生したかにかかわらず、同じように動作するのは、API の強みです。

しかし、すべてのドラッグ イベントに対してシリアル化された情報を提供できないのは dataTransfer.types (で説明したように)。 作業ソリューション のように)、APIに明らかな欠落があります。 私は はドラッグイベントにおける公開データに関する提案を提出しました。 を WHATWG に提出しましたので、支持を表明していただけると幸いです。