DragEvent

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

Event UIEvent MouseEvent DragEvent

インスタンスプロパティ

DragEvent.dataTransfer 読取専用

ドラッグ&ドロップ操作で動かされているデータです。

コンストラクター

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

DragEvent()

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

イベントの種類

drag

このイベントは、要素や選択テキストのドラッグが開始されているときに発生します。

dragend

このイベントは、(マウスボタンを離したり、Esc キーを押下したりして)ドラッグ操作が終了したときに発生します。

dragenter

このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先に入ったときに発生します。

dragleave

このイベントは、ドラッグされた要素や選択テキストが有効なドロップ先から出たときに発生します。

dragover

このイベントは、要素や選択テキストが有効なドロップ先の上をドラッグされたときに発生します(マウスが動いていない場合は 50 ミリ秒ごとに、それ以外は 5 ミリ秒ごと(遅い動作)か 1 ミリ秒ごと(速い動作)の間隔です。この発生パターンは mouseover とは異なります)。

dragstart

このイベントは、ユーザーが要素や選択テキストのドラッグを開始したときに発生します。

drop

このイベントは、要素や選択テキストが有効なドロップ先にドロップされたときに発生します。

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

仕様書

Specification
HTML
# the-dragevent-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DragEvent
DragEvent() constructor
dataTransfer

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報