この記事は翻訳作業中です。

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>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

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

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }
</style>

<script>
  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
      event.preventDefault();
  }, 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)
      event.preventDefault();
      // 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);
</script>

仕様

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

ブラウザ互換性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 未サポート 未サポート

関連情報

ドキュメントのタグと貢献者

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