drag イベントはユーザーによって要素もしくはテキストがドラッグされているときに、数百ミリ秒ごとに発火されます。


バブル はい
Cancelable はい
ターゲットオブジェクト Document, Element
インタフェース DragEvent
デフォルトアクション ドラッグ&ドロップ操作を続ける


プロパティ タイプ 説明
target 読取専用 EventTarget ドラッグされている要素のすぐ下にあった要素
type 読取専用 DOMString イベントのタイプ
bubbles 読取専用 Boolean イベントが通常はバブルするかどうか
cancelable 読取専用 Boolean イベントが cancellable かどうか
view 読取専用 WindowProxy document.defaultView (ドキュメントの window )
detail 読取専用 long (float) 0.
dataTransfer DataTransfer drag data store として知られているドラッグ&ドロップ操作の根底となるデータ。 保護されたモード。
currentTarget 読取専用 EventTarget イベントリスナーがアタッチされたノード
relatedTarget 読取専用 EventTarget For mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX 読取専用 long

グローバル( screen )な座標上での、マウスポインターのX座標。

screenY 読取専用 long グローバル( screen )な座標上での、マウスポインターのY座標。
clientX 読取専用 long ローカル( DOM content )な座標上での、マウスポインターのX座標。
clientY 読取専用 long ローカル( DOM content )な座標上での、マウスポインターのY座標。
button 読取専用 unsigned short The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons 読取専用 unsigned short The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure 読取専用 float The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey 読取専用 boolean イベントが発火されたとき、Ctrlキーが押されていたら true 。そうでないときは false 。
shiftKey 読取専用 boolean イベントが発火されたとき、Shiftキーが押されていたら true 。そうでないときは false 。
altKey 読取専用 boolean イベントが発火されたとき、Altキーが押されていたら true 。そうでないときは false 。
metaKey 読取専用 boolean イベントが発火されたとき、Metaキーが押されていたら true 。そうでないときは false 。

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;

  var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {

  }, false);

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;
  }, false);

  document.addEventListener("dragend", function( event ) {
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      // prevent default to allow drop
  }, false);

  document.addEventListener("dragenter", function( event ) {
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";

  }, false);

  document.addEventListener("dragleave", function( event ) {
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";

  }, false);

  document.addEventListener("drop", function( event ) {
      // prevent default action (open as link for some elements)
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
  }, false);


Specification Status Comment
HTML Living Standard
drag event の定義
HTML 5.1
drag event の定義
勧告 Initial definition


現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 4 (有) 3.5 (1.9.1) 10 12 3.1
Feature Android Android Webview Chrome for Android Edge Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile
Basic support 未サポート 未サポート 未サポート (有) 未サポート 未サポート 10 未サポート 未サポート



このページの貢献者: mfuji09, 8845musign
最終更新者: mfuji09,