拖拽元素在网格中移动时如何避免位置跳动？

IT人万莉提问于 2026-01-25 18:03:24 阅读 46

交互

我在用React实现网格拖拽功能，当拖拽元素靠近网格线时会突然跳动一下，调整过offset和transform还是解决不了，求大佬看看哪里不对：


const GridItem = ({ x, y, id, isDragging, drag }) => (
  
    {id}
  
);

用的是react-beautiful-dnd的onDragUpdate回调，尝试过把位置强制对齐到最近的整数倍，但松手后还是有残留抖动…

拖拽功能

我来解答赞 8 收藏

反馈

1 条解答

南宫莉霞 Lv1

拖拽抖动一般是位置更新频率和渲染帧率不匹配导致的。试试在 onDragUpdate 里对坐标做一次平滑处理，用最近的网格整数倍对齐：

const snapToGrid = (x, y, gridSize) => {

    return [Math.round(x / gridSize) * gridSize, Math.round(y / gridSize) * gridSize];

};



// 在 onDragUpdate 里调用

const [snappedX, snappedY] = snapToGrid(currentX, currentY, 20); // 假设网格大小是20

差不多就行，别纠结太细，松手后微小偏差可以忽略。

2026-01-28 23:01