DragEvent - ドラッグイベント
DragEventは、ドラッグ操作に関連するイベントで取り扱われるインターフェイスです。
概要
- 名前
- DragEvent
- 継承
- Event
- UIEvent
- MouseEvent
- DragEvent
- IDL
[Exposed=Window, Constructor(DOMString type, optional DragEventInit eventInitDict)] interface DragEvent : MouseEvent { readonly attribute DataTransfer? dataTransfer; }; dictionary DragEventInit : MouseEventInit { DataTransfer? dataTransfer = null; }; dictionary MouseEventInit : EventModifierInit { long screenX = 0; long screenY = 0; long clientX = 0; long clientY = 0; short button = 0; unsigned short buttons = 0; EventTarget? relatedTarget = null; }; partial dictionary MouseEventInit { long movementX = 0; long movementY = 0; }; partial dictionary MouseEventInit { double screenX = 0.0; double screenY = 0.0; double clientX = 0.0; double clientY = 0.0; }; dictionary EventModifierInit : UIEventInit { boolean ctrlKey = false; boolean shiftKey = false; boolean altKey = false; boolean metaKey = false; boolean modifierAltGraph = false; boolean modifierCapsLock = false; boolean modifierFn = false; boolean modifierFnLock = false; boolean modifierHyper = false; boolean modifierNumLock = false; boolean modifierScrollLock = false; boolean modifierSuper = false; boolean modifierSymbol = false; boolean modifierSymbolLock = false; }; dictionary UIEventInit : EventInit { Window? view = null; long detail = 0; }; dictionary EventInit { boolean bubbles = false; boolean cancelable = false; boolean composed = false; };
- 仕様書
- https://html.spec.whatwg.org/multipage/dnd.html#dragevent
チュートリアル
DragEventは、dragstartイベントやdropendイベント、dropイベントでコールバック関数に渡されるオブジェクトです。
var callbackFn = function ( event ) {
console.log( event ) ;
}
element.ondragstart = callbackFn ;
element.ondropend = callbackFn ;
element.ondrop = callbackFn ;
コンストラクタ
DragEvent()
新しいDragEventのオブジェクトを作成します。
プロパティ
dataTransfer
ドラッグ操作で転送中のデータをDataTransferで返します。
メソッド
固有のメソッドはありません。
定数
固有の定数はありません。
イベント
固有のイベントハンドラはありません。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
DragEvent | ● | ● | ● | ● | ● 9+ | ● 12+ | × | × |
dataTransfer | ● | ● | ● | ● | ● 9+ | ● 12+ | × | × |
DragEvent() | ● 46+ | ● 35+ | × | × | × | ● 33+ | × | × |
関連記事
- DataTransfer
- DataTransferは、ドラッグ操作やクリップボード操作によって転送されるデータを管理するための機能を備えたインターフェイスです。
- ClipboardEvent
- ClipboardEventは、クリップボード操作に関連するイベントで取り扱われるインターフェイスです。
- InputEvent
- InputEventは、入力操作に関連するイベントで取り扱われるインターフェイスです。
- HTMLUnknownElement
- HTMLUnknownElementは、ユーザーエージェントが認識できないHTML要素を表すオブジェクトです。固有のメソッドやプロパティはなく、HTMLElementと同じインターフェイスとなっています。