Drag & Drop APIとは
Drag & Drop APIは要素をドラッグアンドドロップすることができるHTML5のAPIであり、ほぼ全てのブラウザで動作する。
（※スマートフォンでは動作しない）
https://caniuse.com/#feat=dragndrop
Drag & Drop APIの使い方
ドラッグ
ドラッグしたい要素にdraggable="true"を付ける。
<p id="draggable" draggable="true" style="border: 1px solid #000">
このp要素はドラッグできます。
</p>上のHTMLは以下のように表示され、p要素をドラッグすることができる。
このp要素はドラッグできます。
ドロップ
ドロップ先の要素のdropイベントにイベントハンドラを登録する。
そして、ここが間違いやすく、動作しない原因となることが多いのだが、
dragoverイベントにブラウザのデフォルトのイベントハンドラが登録されているため、イベントオブジェクトのpreventDefaultメソッドをコールしてそれが実行されないようにする必要がある。
以下のページにも説明がある。
https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations
<p id="draggable" draggable="true" style="border: 1px solid #000">
このp要素はドラッグできます。
</p>
<div id="dropzone" style="width: 100px; height: 100px; background-color: red;">
このdiv要素はdropイベントを捕捉します。
</div>
<script>
document.getElementById('dropzone').addEventListener("dragover", (event) => {
event.preventDefault();
});
document.getElementById('dropzone').addEventListener("drop", (event) => {
alert('ドロップされました。');
});
</script>上のHTMLは以下のように表示され、div要素にドロップすることができる。
このp要素はドラッグできます。
このdiv要素はdropイベントを捕捉します。
コメント