ReactJs中onDrag激活时如何更改鼠标光标

原生HTML/CSS/JS方案 #

通过结合事件监听添加状态类，配合CSS的cursor属性实现自定义拖拽光标：

1. 定义可拖拽元素及基础样式

<div class="draggable" draggable="true">拖拽我</div>

.draggable {
  padding: 1rem;
  background: #eee;
  cursor: grab; /* 未拖拽时的光标 */
}
/* 拖拽激活时的光标样式 */
.draggable.dragging {
  cursor: grabbing;
  opacity: 0.8;
}

2. 监听拖拽事件切换状态类

const draggableEl = document.querySelector('.draggable');

draggableEl.addEventListener('dragstart', () => {
  draggableEl.classList.add('dragging');
});

draggableEl.addEventListener('dragend', () => {
  draggableEl.classList.remove('dragging');
});

React框架下的实现逻辑 #

利用状态管理控制样式类，逻辑和原生一致：

import { useState } from 'react';

export default function DraggableItem() {
  const [isDragging, setIsDragging] = useState(false);

  const handleDragStart = () => setIsDragging(true);
  const handleDragEnd = () => setIsDragging(false);

  return (
    <div
      className={`draggable ${isDragging ? 'dragging' : ''}`}
      draggable
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      拖拽我
    </div>
  );
}

对应的CSS样式和原生方案相同。

额外说明 #

• 可以使用自定义图片光标，格式为 cursor: url('自定义光标路径'), auto;，注意添加 fallback 值保证兼容性
• 部分浏览器可能存在默认拖拽光标优先级问题，通过dragstart事件添加类的方式通常能覆盖默认行为

内容的提问来源于stack exchange，提问作者Omphile James