Edited at

HTML5のドラッグ&ドロップ機能を使う際の注意点


draggable="true" が効かない!

こんな地雷を踏むとは思いませんでした…TT


FireFox

dragstart に充てたリスナーが受け取るeventにdataTransferというオブジェクトが入っています。こいつにsetDataというメソッドがあり、これにデータを入れないと、ドラッグしたと判定してくれません。

下記のように、ダミーでもいいのでデータを入れてしまうのは一つの解決策になります。

document.getElementById("anyDragItem")

.addEventListener("dragstart", (e) => e.dataTransefer.setdata("text", "dummy"))


chrome

dragstart に充てたリスナーが event.preventDefault() を実行すると、ドラッグしたと判定してくれなくなりますので、そこさえ注意していれば問題ありません。