DragEvent インターフェイスは、ドラッグアンドドロップの対話を表す DOM イベントです。ユーザはタッチ面でポインティングデバイス (マウスなど) を置くことによりドラッグを開始して、ポインタを新たな場所 (別の DOM 要素など) にドラッグします。アプリケーションは独自の方法で、ドラッグアンドドロップの操作を自由に解釈できます。
このインターフェイスは、MouseEvent および Event のプロパティを継承します。
プロパティ
DragEvent.dataTransfer読取専用- ドラッグアンドドロップの操作で動かされているデータです。
コンストラクタ
このインターフェイスにはコンストラクタがありますが、役に立つ DataTransfer オブジェクトをスクリプトから作成することはできません。これは DataTransfer オブジェクトに、ドラッグアンドドロップ中にブラウザによって調整される処理やセキュリティのモデルがあるためです。
DragEvent()- 本物ではなく、また信頼されていない DragEvent を作成します。
イベントタイプ
drag- このイベントは、要素や選択テキストがドラッグされているときに発生します。
dragend- このイベントは、(マウスボタンを離したり、Esc キーを押下して) ドラッグ操作が終了したときに発生します。
dragenter- このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先に入ったときに発生します。
dragexit- このイベントは、要素がドラッグ操作の直接的な選択対象ではなくなったときに発生します。
dragleave- このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先から出たときに発生します。
dragover- このイベントは、要素や選択テキストが有効なドロップ先の上をドラッグされたときに (数百ミリ秒ごとに) 発生します。
dragstart- このイベントは、ユーザが要素や選択テキストのドラッグを開始したときに発生します。
drop- このイベントは、要素や選択テキストが有効なドロップ先にドロップされたときに発生します。
GlobalEventHandlers
GlobalEventHandlers.ondragdragイベントのグローバルイベントハンドラ。GlobalEventHandlers.ondragenddragendイベントのグローバルイベントハンドラ。GlobalEventHandlers.ondragenterdragenterイベントのグローバルイベントハンドラ。GlobalEventHandlers.ondragexitdragexitイベントのグローバルイベントハンドラ。GlobalEventHandlers.ondragleavedragleaveイベントのグローバルイベントハンドラ。GlobalEventHandlers.ondragoverdragoverイベントのグローバルイベントハンドラ。GlobalEventHandlers.ondragstartdragstartイベントのグローバルイベントハンドラ。GlobalEventHandlers.ondropdropイベントのグローバルイベントハンドラ。
例
各プロパティ、コンストラクタ、イベントタイプおよびグローバルイベントハンドラの例は、それぞれのリファレンスページに掲載しています。
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| WHATWG HTML Living Standard DragEvent の定義 |
現行の標準 | |
| HTML5.1 DragEvent の定義 |
草案 | 最初の定義 |
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 4 | 3.5 (1.9.1) | 10 | 12 | 3.1 |
| 機能 | Android | Android Webview | Chrome for Android | Firefox Mobile (Gecko) | Firefox OS | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| 基本サポート | 未サポート | 未サポート | 未サポート | 未サポート | 未サポート | 10 | 未サポート | 未サポート |