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/

聚苯乙烯。我正在寻找纯JS解决方案，没有JQuery。 PS2。在我的案例中，我无法得到答案。我不想使用自定义光标图像，只是标准的CSS图像。

Answer 1

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

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

（Fiddle）

拖动HTML元素时更改光标

1 个答案: