如何更改拖动时的光标

Question

我在拖动对象期间更改光标时遇到问题。我正在尝试找出如何在拖动时正确更改光标。

我有一个 React 组件。 我尝试像这样实现光标更改，但它不起作用。通过此实现，光标在拖动过程中不会改变（它保持默认的交叉圆圈）。

function App() {
  const dragTarget = useRef(null);

  function dragStartHandler(e) {
    dragTarget.current.style.cursor = 'move';
  }

  function dragEndHandler() {
    dragTarget.current.style.cursor = 'auto';
  }

  return (
    <div
   
      draggable
      onDragStart={dragStartHandler}
      onDragEnd={dragEndHandler}
      id="dragTarget"
      className="draggable-element"
    >
      Drag me!
    </div>
  );
}

请帮助我了解如何在拖动过程中正确操作光标样式。预先感谢您。

Answer 1

大多数浏览器不支持更改光标样式。我认为被拖动元素的光标样式是由浏览器决定的，不能被 CSS 或 JavaScript 覆盖。

一个可能的解决方案是更改文档正文的光标样式，这会影响整个页面的光标样式。您可以通过将以下行添加到代码中来完成此操作：

function dragStartHandler(e) {
document.body.style.cursor = 'move';
}

function dragEndHandler() {
document.body.style.cursor = 'auto';
}