要素をドラッグすると、対象の画像がコピーされマウスに追随するように表示されます。
これはどこにドロップする場所を決めるのに、視覚的に便利なのですが、要素が重なって表示されている場合に、重なり部分も表示されてダサいことになります。
調べてみたところ、根本的な対処法はなく、空の要素を無理やりあてがい、無効とする方法がありました。
let dummy = documentByElement('span')
event.dataTransfer.setDragImage(dummy, 0, 0)
ここではspan
にしていますが、表示されなければどんな要素でも構いません。
本当にここドキュメントは参考になります。
https://developer.mozilla.org/ja/docs/DragDrop/Drag_Operations