HTMLElement: drag イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
drag イベントは、要素や選択されたテキストをユーザーがドラッグしている間に、数百ミリ秒ごとに発生します。
このイベントはキャンセル可能で、Document オブジェクトと Window オブジェクトまでバブルアップする可能性があります。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。
js
addEventListener("drag", (event) => {}); ondrag = (event) => {}; イベント型
イベントプロパティ
以下に挙げたプロパティに加えて、親である Event から継承したプロパティもあります。
DragEvent.dataTransfer読取専用-
ドラッグ＆ドロップ操作の間に転送されるデータです。
例
ドラッグ＆ドロップの例
HTML
html
<div class="dropzone"> <div id="draggable" draggable="true">この div はドラッグ可</div> </div> <div class="dropzone" id="droptarget"></div> CSS
css
body { /* この例の中でユーザーによるテキストの選択を防止する */ user-select: none; } #draggable { text-align: center; background: white; } .dropzone { width: 200px; height: 20px; background: blueviolet; margin: 10px; padding: 10px; } .dropzone.dragover { background-color: purple; } .dragging { opacity: 0.5; } JavaScript
js
let dragged; /* ドラッグ可能なターゲット上で発生するイベント */ const source = document.getElementById("draggable"); source.addEventListener("drag", (event) => { console.log("dragging"); }); source.addEventListener("dragstart", (event) => { // ドラッグ中の要素の参照を保存 dragged = event.target; // 半透明にする event.target.classList.add("dragging"); }); source.addEventListener("dragend", (event) => { // 透明度を解除 event.target.classList.remove("dragging"); }); /* ドロップ対象に発生するイベント */ const target = document.getElementById("droptarget"); target.addEventListener( "dragover", (event) => { // ドロップできるように既定の動作を停止 event.preventDefault(); }, false, ); target.addEventListener("dragenter", (event) => { // ドラッグ可能な要素がドロップ先に入ったときに、ドロップ先の候補を強調表示する if (event.target.classList.contains("dropzone")) { event.target.classList.add("dragover"); } }); target.addEventListener("dragleave", (event) => { // ドラッグ可能な要素がドロップ先から離れたときに、ドロップ先の候補の背景をリセットする if (event.target.classList.contains("dropzone")) { event.target.classList.remove("dragover"); } }); target.addEventListener("drop", (event) => { // 既定の動作（一部の要素でリンクとして開く）を行わないようにする。 event.preventDefault(); // ドラッグした要素を選択されたドロップターゲットに移動する if (event.target.classList.contains("dropzone")) { event.target.classList.remove("dragover"); event.target.appendChild(dragged); } }); 結果
仕様書
| Specification |
|---|
| HTML # handler-ondrag |
| HTML # event-dnd-drag |