React Flow Renderer与React Beautiful Dnd缩放低于100%时拖拽偏移问题

问题根源：当React Flow容器应用缩放（transform: scale(n)）后，鼠标事件的clientX/Y是基于屏幕的原始坐标，但React Beautiful Dnd在计算拖拽元素位置时未考虑缩放比例，导致元素位置与鼠标光标出现偏移，缩放比例越低偏移越明显。

解决步骤 #

1. 获取当前缩放比例
   通过React Flow提供的useZoomPanHelper钩子直接获取当前的缩放值，无需手动计算DOM元素的变换：

   import { useZoomPanHelper } from 'react-flow-renderer';
   
   const { zoom } = useZoomPanHelper();
   

2. 修正拖拽坐标
   在拖拽过程中，将鼠标的屏幕坐标转换为容器内的缩放后坐标，抵消缩放影响：

   import { useDrag } from 'react-beautiful-dnd';
   
   function DraggableElement() {
     const { zoom } = useZoomPanHelper();
     const container = document.getElementById('react-flow'); // 替换为你的React Flow容器ID
   
     const [{ isDragging }, drag] = useDrag({
       type: 'ELEMENT',
       item: { id: 'drag-item' },
       collect: (monitor) => ({ isDragging: monitor.isDragging() }),
       onDrag: (event) => {
         const containerRect = container.getBoundingClientRect();
         // 计算鼠标在容器内的原始偏移
         const rawOffsetX = event.clientX - containerRect.left;
         const rawOffsetY = event.clientY - containerRect.top;
         // 用缩放比例修正坐标
         const correctedX = rawOffsetX / zoom;
         const correctedY = rawOffsetY / zoom;
         // 使用correctedX/Y更新拖拽元素的位置
         updateElementPosition(correctedX, correctedY);
       },
     });
   
     return (
       <div ref={drag} style={{ opacity: isDragging ? 0.6 : 1 }}>
         拖拽元素
       </div>
     );
   }
   

3. 自定义拖拽预览（可选）
   如果React Beautiful Dnd的默认预览仍有偏移，可自定义预览组件，手动应用缩放修正：

   import { createPortal } from 'react-dom';
   
   function CustomDragPreview({ position, zoom }) {
     // 对预览位置应用缩放修正
     const previewStyle = {
       position: 'fixed',
       left: position.x / zoom,
       top: position.y / zoom,
       pointerEvents: 'none',
     };
   
     return createPortal(
       <div style={previewStyle}>自定义拖拽预览</div>,
       document.body
     );
   }
   

关键注意点 #

• 确保获取的zoom值与React Flow容器的实际缩放比例一致，避免因多容器嵌套导致的计算误差。
• 若容器有滚动偏移，需额外减去容器的scrollLeft和scrollTop值，确保坐标计算准确。

内容的提问来源于stack exchange，提问作者Uzaq Sahillərdə