--- title: 'Document: drag イベント' slug: Web/API/Document/drag_event tags: - API - DOM - Document - Drag - DragEvent - Event - Reference - Web - drag and drop - イベント - ウェブ translation_of: Web/API/Document/drag_event ---
{{APIRef}}

drag イベントは、要素や選択されたテキストをユーザーがドラッグしている間に、数百ミリ秒ごとに発生します。

バブリング あり
キャンセル可能 はい
既定のアクション ドラッグ＆ドロップ操作を続ける
インターフェイス {{domxref("DragEvent")}}
イベントハンドラープロパティ {{domxref("GlobalEventHandlers/ondrag", "ondrag")}}

例

このコードは JSFiddle デモまたは以下で直接ご覧ください。

HTML

<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>

CSS

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

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

JavaScript

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);

{{EmbedLiveSample('Examples', '300', '200', '')}}

仕様書

仕様書 状態 備考
{{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} {{Spec2("HTML WHATWG")}}  

ブラウザーの対応

{{Compat("api.Document.drag_event")}}

関連情報