DragEvent

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

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

プロパティ

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

コンストラクター

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

DragEvent()
本物ではなく、また信頼されていない DragEvent を作成します。

イベントタイプ

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

GlobalEventHandlers

GlobalEventHandlers.ondrag
drag イベントの グローバルイベントハンドラー
GlobalEventHandlers.ondragend
dragend イベントの グローバルイベントハンドラー
GlobalEventHandlers.ondragenter
dragenter イベントの グローバルイベントハンドラー
GlobalEventHandlers.ondragexit
dragexit イベントの グローバルイベントハンドラー
GlobalEventHandlers.ondragleave
dragleave イベントの グローバルイベントハンドラー
GlobalEventHandlers.ondragover
dragover イベントの グローバルイベントハンドラー
GlobalEventHandlers.ondragstart
dragstart イベントの グローバルイベントハンドラー
GlobalEventHandlers.ondrop
drop イベントの グローバルイベントハンドラ

各プロパティ、コンストラクター、イベントタイプおよびグローバルイベントハンドラーの例は、それぞれのリファレンスページに掲載しています。

仕様

仕様書 策定状況 コメント
HTML Living Standard
DragEvent の定義
現行の標準
HTML 5.1
DragEvent の定義
勧告 最初の定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
DragEventChrome 完全対応 3Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 10Opera 完全対応 12Safari 完全対応 3.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 4Opera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
DragEvent() constructorChrome 完全対応 46Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 10Opera 完全対応 12Safari 完全対応 3.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし
dataTransferChrome 完全対応 46Edge 完全対応 12Firefox 完全対応 3.5IE 完全対応 10Opera 完全対応 ありSafari 完全対応 3.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応

関連情報