我有一个使用JavaScript的拖放API的简单应用。我想在拖动到另一个元素上方时改变光标。

我觉得很难直接修改被拖动元素的CSS属性，因此我改为把改动应用到拖拽容器本身。

在下面的示例中，当在 dragover 函数中拖动时，我给容器添加一个名为 dragging 的类，让CSS样式表处理其余部分。在CSS中，我修改了轮廓颜色和光标。你会发现轮廓确实会改变，但光标不会。

我把在 dragstart 函数中添加类这一步注释掉了，但这确实可以改变光标。然而，我想根据我正在拖动的目标元素动态地改变光标，这也是我尝试把它放在 dragover 函数中的原因。

有没有办法通过这种方式来更新光标？

simpleDrag(document.querySelector('p#container'));

function simpleDrag(container) {
  let elements = Array.from(container.children);
  elements.forEach(e => {
    e.draggable=true;
    e.addEventListener('dragstart', dragstart, false);
    e.addEventListener('dragover', dragover, false);
    e.addEventListener('drop', drop, false);
  });

  function dragstart(event) {
  //  container.classList.add('dragging')
  }

  function dragover(event) {
    container.classList.add('dragging');
    event.preventDefault();
  }

  function drop(event) {
    event.stopPropagation();
    container.classList.remove('dragging');
  }
}

p#container {
  border: thin solid #999;
  padding: 1em;

  &.dragging {
    cursor: grab;
    outline: thick solid red;
  }

  span {
    border: thin solid #ccc;
    padding: 0.5em 0.75em;
    user-select: none;
  }
}

<p id="container">
  <span>Hello</span>
  <span>Goodbye</span>
</p>

解决方案

那将符合规范 per specs:

从用户代理准备启动拖放（drag-and-drop）操作之时，到拖放（drag-and-drop）操作结束之日，设备输入事件（例如鼠标和键盘事件）必须被抑制。

可以说，CSS cursor 将取决于这类输入事件，由于这些事件被抑制，光标不会改变。请注意，即便 :hover 或 :active 在拖拽与放置（D&D）操作期间也是 被冻结 的。

甚至 setDragImage() 只有在 DataTransfer 的模式为“read/write”时才可用，而这只在 dragstart 事件期间发生。一旦反馈图像被创建，我们就只能对其进行修改，唯一能对其施加的更改，是通过 DataTransfer.dropEffect 属性实现的，该属性将仅能启用少量光标效果。