如何在React DnD中获取拖拽元素在放置区的{x,y}相对位置而非绝对位置

要获取拖拽指针相对于放置区域的{x,y}位置，核心是将客户端坐标转换为放置区域的相对坐标，具体步骤如下：

• 给放置区域绑定useRef，获取其DOM元素
• 在useDrop的回调中（比如hover或drop），通过监视器（monitor）拿到指针的客户端坐标
• 利用DOM元素的getBoundingClientRect()计算相对位置

代码示例 #

import { useDrop } from 'react-dnd';
import { useRef } from 'react';

const DropZone = () => {
  const dropZoneRef = useRef(null);

  const [{ isOver }, drop] = useDrop(() => ({
    accept: 'YOUR_ITEM_TYPE', // 替换成你的拖拽项类型
    hover: (item, monitor) => {
      // 获取指针的客户端坐标
      const clientOffset = monitor.getClientOffset();
      if (!clientOffset || !dropZoneRef.current) return;

      // 获取放置区域的DOM边界信息
      const rect = dropZoneRef.current.getBoundingClientRect();
      
      // 计算相对坐标
      const relativeX = clientOffset.x - rect.left;
      const relativeY = clientOffset.y - rect.top;

      // 这里就拿到了相对于放置区域的{x,y}，可做后续处理
      console.log('相对坐标：', { x: relativeX, y: relativeY });
    },
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  }));

  return (
    <div 
      ref={(node) => {
        dropZoneRef.current = node;
        drop(node); // 将drop方法绑定到DOM节点
      }}
      style={{
        width: '400px',
        height: '400px',
        border: isOver ? '2px solid blue' : '2px dashed gray',
        position: 'relative',
      }}
    >
      放置区域
    </div>
  );
};

export default DropZone;

关键说明 #

• monitor.getClientOffset()：获取当前拖拽指针的客户端坐标（相对于浏览器视口）
• getBoundingClientRect()：返回放置区域DOM元素的边界信息，包括left、top等相对于视口的位置
• 相对坐标计算：用指针的客户端x/y减去放置区域的left/top，得到相对于放置区域左上角的坐标

内容的提问来源于stack exchange，提问作者Suraj Bande