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

FireFoxでHTML5のドラッグ＆ドロップ機能を使う際の注意点:

draggable="true" が効かない！

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

FireFox

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

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

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

chrome

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