React中拖拽网格元素时位置偏移怎么办？

Code°可欣提问于 2026-03-13 14:06:23 阅读 4

交互

我用react-beautiful-dnd做了一个可拖拽的网格布局，但每次拖动卡片时，它都会突然跳到鼠标左上方很远的位置，根本对不准。明明CSS里没设什么奇怪的定位啊。

试过给容器加position: relative，也检查了transform有没有冲突，还是不行。这是我的简化代码：

const Grid = () => {
  const { items, moveItem } = useDnd();
  return (
    <DndContext onDragEnd={moveItem}>
      <div className="grid grid-cols-4 gap-4">
        {items.map(item => (
          <Draggable key={item.id} id={item.id}>
            <div className="bg-white p-4 border rounded">
              {item.name}
            </div>
          </Draggable>
        ))}
      </div>
    </DndContext>
  );
}

是不是Draggable组件包裹方式有问题？或者网格布局和拖拽库不兼容？

交互开发用户交互

我来解答赞 1 收藏

反馈

1 条解答

UI恒豪 Lv1

问题在于你漏了 Droppable，而且 Draggable 的用法也不对。react-beautiful-dnd 要求 Draggable 的 children 是个函数，还要把 provided 的 ref 和 props 透传下去。

这样改：

const Grid = () => {

  const { items, moveItem } = useDnd();

  return (

    

      

        {(provided) => (

          
            ref={provided.innerRef}

            {...provided.droppableProps}

            className="grid grid-cols-4 gap-4"

          >

            {items.map((item, index) => (

              

                {(provided) => (

                  
                    ref={provided.innerRef}

                    {...provided.draggableProps}

                    {...provided.dragHandleProps}

                    className="bg-white p-4 border rounded"

                  >

                    {item.name}

                  


                )}

              

            ))}

            {provided.placeholder}

要点：Droppable 包裹整个网格，Draggable 用 children 函数写法，ref 和 props 一定要透传，末尾加 placeholder 占位。

2026-03-13 14:10