Changer le curseur tout en faisant glisser l'élément HTML

Question

Je sais qu'il y a eu de nombreuses questions similaires sur stackoverflow, j'en ai lu plusieurs, mais aucune ne fournissait de réponses dans mon cas. Je veux changer le curseur tout en faisant glisser l'élément HTML. J'ai essayé ceci:

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"; 
} 

Mais cela ne fonctionne pas. Je ne sais pas pourquoi sur terre e.target.style.cursor = "move" ne fonctionne pas. J'ai essayé de le changer en document.body.style.cursor = "move", mais ça ne marche pas non plus. Toute aide pour résoudre ce problème avec l'explication pourquoi mon code ne fonctionne pas sera grandement appréciée.

lien JS Fiddle: https://jsfiddle.net/4w20xxvp/59/

Ps. Je cherche une solution JS pure, pas de JQuery. Ps2. Je n'ai pas pu obtenir de réponses de travailler dans mon cas. Et je ne veux pas utiliser des images de curseur personnalisées, seulement des images css standard.

Answer 1

Essayez d'empêcherDefault sur les autres événements de glissement. En outre, vous pouvez envisager d'ajouter une cible de dépôt qui gère les événements de survol.

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

(Fiddle)