React函数组件中react-draggable如何为映射元素保存独立拖拽位置

你当前所有可拖拽元素共用了全局唯一的x、y状态，只要修改状态就会同步作用到所有元素上，这是导致所有元素同步移动的核心原因。

你需要将状态修改为数组/对象结构，为每个可拖拽元素存储独立的坐标值，修改时仅更新对应元素的坐标即可。

实现代码 #

// 1. 调整状态结构：用数组存储每个元素的独立坐标，初始值和numberofGraphs长度对齐
// 如果numberofGraphs是动态变化的，可配合useEffect同步更新状态长度
const [positions, setPositions] = useState(
  Array(numberofGraphs.length).fill({x: 0, y: 0})
);

// 2. 调整拖拽结束回调：接收当前拖拽元素的索引，仅更新对应位置的坐标
const handleStop = (index, event, dragElement) => {
  setPositions(prev => {
    const newPositions = [...prev];
    newPositions[index] = {
      x: dragElement.x,
      y: dragElement.y
    };
    return newPositions;
  });
};

// 3. 渲染时为每个Draggable绑定独立的坐标和对应回调
{numberofGraphs.map((si, k) => (
  <Draggable
    key={k} // React列表渲染必填属性，有业务唯一id时优先用id作为key
    onStop={(e, dragEl) => handleStop(k, e, dragEl)} 
    position={positions[k]}
  > 
    <div className="resizablebox"> 
    </div>
  </Draggable>
))}

优化建议 #

• 如果numberofGraphs中的每个元素有唯一的业务id，推荐用id代替数组索引作为key和状态的标识，避免数组顺序变化导致的坐标错乱
• 如果可拖拽元素需要支持动态新增/删除，修改状态时同步对positions数组做对应增删操作即可

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