DragEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年9月⁩.

DragEvent インターフェイスは、ドラッグ＆ドロップ操作を表す DOM イベントです。ユーザーはタッチ面でポインティングデバイス（マウスなど）を置くことによりドラッグを開始して、ポインターを新たな場所（別の DOM 要素など）にドラッグします。アプリケーションは独自の方法で、ドラッグ＆ドロップの操作を自由に解釈できます。

このインターフェイスは、MouseEvent および Event からプロパティを継承しています。

インスタンスプロパティ

DragEvent.dataTransfer 読取専用: ドラッグ＆ドロップ操作で動かされているデータです。

コンストラクター

このインターフェイスにはコンストラクターがありますが、役に立つ DataTransfer オブジェクトをスクリプトから作成することはできません。これは DataTransfer オブジェクトに、ドラッグ＆ドロップ中にブラウザーによって調整される処理やセキュリティのモデルがあるためです。

DragEvent(): 合成された信頼されてない DragEvent を作成します。

イベントの種類

drag: このイベントは、要素や選択テキストのドラッグが開始されているときに発生します。
dragend: このイベントは、（マウスボタンを離したり、Esc キーを押下したりして）ドラッグ操作が終了したときに発生します。
dragenter: このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先に入ったときに発生します。
dragleave: このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先から出たときに発生します。
dragover: このイベントは、要素や選択テキストが有効なドロップ先の上をドラッグされたときに発生します（マウスが動いていない場合は 50 ミリ秒ごとに、それ以外は 5 ミリ秒ごと（遅い動作）か 1 ミリ秒ごと（速い動作）の間隔です。この発生パターンは mouseover とは異なります）。
dragstart: このイベントは、ユーザーが要素や選択テキストのドラッグを開始したときに発生します。
drop: このイベントは、要素や選択テキストが有効なドロップ先にドロップされたときに発生します。