拖动HTML元素时更改光标
问题描述:
我知道在*上有很多类似的问题,我已经阅读了其中的几个,但没有提供答案在我的案例中工作。我想在拖动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。
答
尝试阻止对其他拖动事件的默认设置。此外,您可能需要考虑添加处理dragover事件的放置目标。
document.addEventListener('dragover', (e) => e.preventDefault(), true)
(Fiddle)
的可能的复制[HTML5拖放更改图标/光标的同时拖动](https://*.com/questions/10119514/html5-drag-drop-change-icon -cursor-dragging) – Nisarg
我无法在上面的链接中使用答案来工作在我的情况。我不想使用自定义图像(如答案中的解释),我想使用一个CSS游标(style.cursor)。 – Furman
你使用哪个操作系统/浏览器?我的Mac/Chrome可以在你的代码中正常工作。 –