javascriptでドラッグ中のカーソルが変更できない

Question

javascriptでドラッグ中のカーソルを変更したいのですが、うまくできません。
ドラッグして移動すると禁止マークになってしまいます。
ondragoverの中でカーソルの設定をしてみたりもしましたが変わりませんでした。

ドラッグ&ドロップの処理はできているので見た目だけの問題ですが気になります。
どこの設定が悪いのでしょうか？

こんな感じで、禁止マークになります。

Answer 1

CSSでカーソルの見た目を変えることができます。
イベントが発生しているときにクラスを付与するなりで、カーソルの見た目を変えればいいのでないでしょうか。

Answer 2

ドロップ可能な場所にdragover処理を入れると良いでしょう

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const p=document.querySelector('#parent');
  p.addEventListener('dragover',e=>e.preventDefault());
  let t=null;
  p.querySelectorAll('div').forEach(x=>{
    x.setAttribute("draggable","true");
    x.addEventListener('drop',e=>{
      p.insertBefore(t,x.nextElementSibling);
    });
    x.addEventListener('dragstart',e=>{
      t=e.target;
    });
  });
});
</script>

<div id="parent">
<div>item1</div>
<div>item2</div>
<div>item3</div>
<div>item4</div>
<div>item5</div>
</div>

Comments

[tokotaku]

ドロップ範囲にpreventDefault()で禁止マークではなくなることは分かったのですが
ドラッグ中のカーソルの見た目は他のものに変えられないのですか？