拖动HTML元素时更改光标

我知道在stackoverflow上有很多类似的问题，我已经阅读了其中的几个，但没有提供答案在我的案例中工作。我想在拖动HTML元素时更改光标。我试过这个：拖动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/

诗篇。我正在寻找纯JS解决方案，而不是JQuery。 Ps2。我无法从我的案件中得到答案。我不想使用自定义光标图像，只是标准的CSS。

来源

2017-08-10 Furman

的可能的复制[HTML5拖放更改图标/光标的同时拖动]（https://stackoverflow.com/questions/10119514/html5-drag-drop-change-icon -cursor-dragging） – Nisarg

我无法在上面的链接中使用答案来工作在我的情况。我不想使用自定义图像（如答案中的解释），我想使用一个CSS游标（style.cursor）。 – Furman

你使用哪个操作系统/浏览器？我的Mac/Chrome可以在你的代码中正常工作。 –

-1

尝试阻止对其他拖动事件的默认设置。此外，您可能需要考虑添加处理dragover事件的放置目标。

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

（Fiddle）

来源

2017-12-03 03:13:47

拖动HTML元素时更改光标

回答

相关问题