SYNCERのロゴ
アイキャッチ画像

DragEvent - ドラッグイベント

DragEventは、ドラッグ操作に関連するイベントで取り扱われるインターフェイスです。

概要

名前
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 ;

プロパティ

dataTransfer

ドラッグ操作で転送中のデータをDataTransferで返します。

メソッド

固有のメソッドはありません。

定数

固有の定数はありません。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
DragEvent 9+ 12+××
DragEvent() 46+ 35+××× 33+××
dataTransfer 9+ 12+××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月9日 (月)
コンテンツを公開しました。