dragenter & dragover イベントからドラッグされているものを判断する。
質問
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 に提出しましたので、支持を表明していただけると幸いです。
関連
-
[解決済み] jQueryでJavaScriptオブジェクトから選択する際に、オプションを追加する最も良い方法は何ですか?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
-
[解決済み] クロームでDropイベントが発生しない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] Reactメモを使うべきではない場合とは?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする
-
[解決済み] JavaScriptのArray.sort()メソッドでシャッフルするのは正しいのか?
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法