Document: drop イベント

drop イベントは、要素または選択されたテキストが、妥当なドロップターゲットにドロップされたときに発生します。

バブリング あり
キャンセル 可
既定のアクション 様々
インターフェイス DragEvent
イベントハンドラープロパティ ondrop

例

最小限のドラッグ＆ドロップの例

この例では、コンテナーの中にドラッグ可能な要素を置いています。要素を掴んで他のコンテナーの上にドラッグし、そして放してみましょう。

ここでは、 3 つのイベントハンドラーを使用しています。

  • dragstart イベントハンドラーでは、ユーザーがドラッグした要素への参照を取得します。
  • dragover イベントハンドラーでは、ターゲットコンテナーに対して event.preventDefault() を呼び出し、drop イベントを受け取ることができるようにします。
  • ドロップゾーンの drop イベント ハンドラーでは、ドラッグ可能な要素を元のコンテナーからドロップゾーンに移動する処理を行います。

ドラッグ＆ドロップのより完全な例については、drag イベントのページを参照してください。

HTML

<div class="dropzone">
  <div id="draggable" draggable="true">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>

CSS

body {
  /* Prevent the user selecting text in the example */
  user-select: none;
}

#draggable {
  text-align: center;
  background: white;
}

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

JavaScript

let dragged = null;

document.addEventListener("dragstart", event => {
  // store a ref. on the dragged elem
  dragged = event.target;
});

document.addEventListener("dragover", event => {
  // prevent default to allow drop
  event.preventDefault();
});

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

結果

仕様書

{{Specifications}}

ブラウザーの互換性

{{Compat}}

関連情報