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.ondragdragイベントのグローバルイベントハンドラー。GlobalEventHandlers.ondragenddragendイベントのグローバルイベントハンドラー。GlobalEventHandlers.ondragenterdragenterイベントのグローバルイベントハンドラー。GlobalEventHandlers.ondragexitdragexitイベントのグローバルイベントハンドラー。GlobalEventHandlers.ondragleavedragleaveイベントのグローバルイベントハンドラー。GlobalEventHandlers.ondragoverdragoverイベントのグローバルイベントハンドラー。GlobalEventHandlers.ondragstartdragstartイベントのグローバルイベントハンドラー。GlobalEventHandlers.ondropdropイベントのグローバルイベントハンドラ。
例
各プロパティ、コンストラクター、イベントタイプおよびグローバルイベントハンドラーの例は、それぞれのリファレンスページに掲載しています。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| HTML Living Standard DragEvent の定義 |
現行の標準 | |
| HTML 5.1 DragEvent の定義 |
勧告 | 最初の定義 |
ブラウザー実装状況
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| デスクトップ | モバイル | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
DragEvent | Chrome 完全対応 3 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 10 | Opera 完全対応 12 | Safari 完全対応 3.1 | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 4 | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
DragEvent() constructor | Chrome 完全対応 46 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 10 | Opera 完全対応 12 | Safari 完全対応 3.1 | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 あり | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
dataTransfer | Chrome 完全対応 46 | Edge 完全対応 12 | Firefox 完全対応 3.5 | IE 完全対応 10 | Opera 完全対応 あり | Safari 完全対応 3.1 | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android 完全対応 あり | Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応