React拖拽元素时替换not-allowed光标为grabbing及实现规范咨询

一、拖拽光标无法改为grabbing的解决方法 #

原生HTML5的draggable拖拽机制会强制替换光标样式，直接设置cursor: grab/grabbing往往不生效，这里有两种可行方案：

方案1：适配原生draggable的光标样式 #

在拖拽开始时手动给卡片和全局body设置光标样式，同时必须给dataTransfer设置数据（原生drag的必要触发条件）：

import React from 'react'
import { useState } from 'react';
const Card = ({text}) => {

  const [position, setPosition] = useState({x: 0, y: 0})
  const [prevPosition, setPrevPosition] = useState({x: 0, y: 0})
  const [isDragging, setIsDragging] = useState(false)

  const dragEndHandler = (e)=>{
    const currPosition = {x: e.screenX, y: e.screenY}
    const diff = {
      x: position.x + (currPosition.x - prevPosition.x),
      y: position.y + (currPosition.y - prevPosition.y)
    }
    
    setPosition(diff)
    setIsDragging(false)
    // 拖拽结束恢复光标
    document.body.style.cursor = 'default'
  }

  const dragStartHandler = (e)=>{
    setPrevPosition({x: e.screenX, y: e.screenY})
    setIsDragging(true)
    // 必须设置dataTransfer才能正常触发拖拽，同时强制设置光标
    e.dataTransfer.setData('text/plain', text)
    e.dataTransfer.effectAllowed = 'move'
    // 给body和卡片设置抓取光标
    document.body.style.cursor = 'grabbing'
  }

  const cardStyle = {
    position: 'relative',
    left: `${position.x}px`,
    top: `${position.y}px`,
    backgroundColor: 'white',
    margin: '8px',
    padding: '8px',
    display: 'inline-block',
    cursor: isDragging ? 'grabbing' : 'grab'
  };

  return (
    <div style={cardStyle} draggable onDragStart={dragStartHandler} onDragEnd={dragEndHandler}>
      {text}
    </div>
  )
}

export default Card

方案2：改用鼠标事件实现拖拽（更推荐） #

原生draggable本就不是为自由定位拖拽设计的，改用mousedown/mousemove/mouseup可以完全控制光标和拖拽逻辑，体验更顺滑：

import React, { useState, useEffect } from 'react';
const Card = ({text}) => {
  const [position, setPosition] = useState({x: 0, y: 0});
  const [isDragging, setIsDragging] = useState(false);
  const [offset, setOffset] = useState({x: 0, y: 0});

  // 监听鼠标移动，只在拖拽状态时生效
  useEffect(() => {
    const handleMouseMove = (e) => {
      if (!isDragging) return;
      setPosition({
        x: e.clientX - offset.x,
        y: e.clientY - offset.y
      });
    };

    const handleMouseUp = () => {
      setIsDragging(false);
    };

    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging, offset]);

  const handleMouseDown = (e) => {
    setIsDragging(true);
    // 记录鼠标相对于卡片左上角的偏移量
    setOffset({
      x: e.clientX - position.x,
      y: e.clientY - position.y
    });
  };

  const cardStyle = {
    position: 'absolute', // 改成absolute避免多个卡片互相影响
    left: `${position.x}px`,
    top: `${position.y}px`,
    backgroundColor: 'white',
    margin: '8px',
    padding: '8px',
    cursor: isDragging ? 'grabbing' : 'grab',
    userSelect: 'none' // 防止拖拽时选中文本
  };

  return (
    <div style={cardStyle} onMouseDown={handleMouseDown}>
      {text}
    </div>
  );
};

export default Card;

二、当前拖拽实现的不良实践分析 #

你的实现确实存在几个不符合最佳实践的点：

• 用错了API场景：HTML5的draggable API是为元素间的拖放交互设计的（比如把卡片拖进某个容器、文件上传），不是用于自由定位的拖拽场景，用它做自由拖拽会有光标控制受限、拖拽延迟、跨浏览器兼容性问题。
• 位置计算逻辑有缺陷：用screenX/Y计算位置，当页面滚动时，卡片位置会和鼠标偏移，应该用clientX/Y（相对于视口）或pageX/Y（相对于文档）结合滚动量。
• 定位方式不合理：用position: relative的话，每个卡片的left/top是相对于自身初始位置，多个卡片拖拽时会互相干扰，改成position: absolute基于父容器定位才是正确的自由拖拽姿势。
• 边界情况未处理：没有处理鼠标移出浏览器窗口的情况，可能导致拖拽状态一直无法重置，出现光标异常。

内容的提问来源于stack exchange，提问作者Sunny Reddy