HTML要素をドラッグしながらカーソルを変更する

Question

私はstackoverflowに関する多くの似たような質問があることを知っています。私はそれらのいくつかを読んだことがあります。私はHTML要素をドラッグしながらカーソルを変更したい。私はこれを試みた：

var startX = null; 
var startY = null; 
var element = document.getElementById('bla'); 

element.addEventListener('dragstart', onDragStart, true); 
element.addEventListener('dragend', onDragEnd, true); 
element.addEventListener('drag', onDrag, true); 

function onDragStart(e){ 

    startX = e.screenX; 
    startY = e.screenY; 
    e.target.style.cursor = "move"; 
} 

function onDrag(e){ 

    e.target.style.cursor = "move"; 
} 

function onDragEnd(e){ 

    var style = document.defaultView.getComputedStyle(element); 

    var newLeft = parseInt(style.left) + e.screenX - startX; 
    var newTop = parseInt(style.top) + e.screenY - startY; 

    e.target.style.left = newLeft + 'px'; 
    e.target.style.top = newTop + 'px'; 

    e.target.style.cursor = "default"; 
} 

しかし、それは動作しません。なぜ地球上でe.target.style.cursor = "move"が動作しないのか分かりません。私はdocument.body.style.cursor = "move"に変更しようとしましたが、どちらも動作しません。私のコードがうまくいかない理由を説明しながら、この問題を解決する助けとなることは大いに感謝します。

JSフィドルリンク：https://jsfiddle.net/4w20xxvp/59/

Psと。私は純粋なJSソリューション、ないJQueryを探しています。 Ps2。私は私の場合には答えを得ることができませんでした。そして、私はカスタムのカーソルイメージを使用したくない、ちょうど標準のCSSイメージを使用したい。

Answer 1

他のドラッグイベントのデフォルトを防止してください。また、dragoverイベントを処理するドロップターゲットを追加することもできます。

document.addEventListener('dragover', (e) => e.preventDefault(), true) 

（Fiddle）の