React组件拖拽时光标样式无法修改的问题求助

在原生HTML5拖拽API中，浏览器会在拖拽过程中接管光标显示，直接修改拖拽元素的cursor样式往往不会生效，这就是你遇到光标始终显示禁止样式的原因。以下是两种可靠的解决方式：

方法一：全局修改body光标（推荐） #

拖拽开始时修改body的光标样式，拖拽结束后恢复，这种方式不受浏览器拖拽光标接管的影响：

function App() {
  const handleDragStart = (e) => {
    // 设置body光标为移动样式
    document.body.style.cursor = 'move';
    // 可选：隐藏默认的拖拽镜像（避免和自定义光标冲突）
    e.dataTransfer.setDragImage(new Image(), 0, 0);
  };

  const handleDragEnd = () => {
    // 恢复body默认光标
    document.body.style.cursor = 'auto';
  };

  return (
    <div
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
      className="draggable-element"
      style={{ cursor: 'grab' }} // 未拖拽时的光标提示
    >
      Drag me!
    </div>
  );
}

方法二：使用CSS伪类（部分浏览器支持） #

利用CSS的:active和:drag伪类控制光标，注意:drag伪类目前仅在部分现代浏览器中支持：

.draggable-element {
  cursor: grab; /* 未拖拽时的光标 */
}

.draggable-element:active {
  cursor: grabbing; /* 按住元素时的光标 */
}

/* 拖拽过程中的光标，需浏览器支持 */
.draggable-element:drag {
  cursor: move;
}

原代码的问题说明 #

你的原代码中没有将dragTarget ref绑定到div元素上（缺少ref={dragTarget}），但即使补上这一点，由于浏览器在拖拽时会强制使用默认拖拽光标，修改元素自身的cursor仍然不会生效，因此优先使用方法一。

内容的提问来源于stack exchange，提问作者Георгий Барсегян