为什么 react-beautiful-dnd 在简单列表中拖放时会摇晃？

Question

您会在这个 gif 中注意到，当我拖动一个项目时，周围的项目并没有完全移开，只有一半移开。然后，当我跌倒时，一切都会震动并卡入到位。这是为什么？我只有一个基本的 hello world 实现。

请注意第二张图片，当我向下拖动时，下面的项目只移动到一半的位置，然后是丑陋的颠簸。我如何让它变得平滑，让所有东西都移到正确的位置？

这基本上是我所拥有的：

const getListStyle = (isDraggingOver) => ({
  opacity: isDraggingOver ? 0.7 : 1,
});

<Droppable droppableId="droppable">
  {(provided, snapshot) => (
    <div
      {...provided.droppableProps}
      ref={provided.innerRef}
      style={getListStyle(snapshot.isDraggingOver)}
    >
      {items.map((item, i) => (
        <MyItem
          key={item.id}
          data={item}
          index={i}
        />
      ))}
      {provided.placeholder}
    </div>
  )}
</Droppable>

const MyItem = ({ data, index }) => {
  return (
    <Draggable key={data.id} draggableId={data.id} index={index}>
      {provided => (
        <section
          {...provided.draggableProps}
        >
          <LinesIcon
            className={styles.dragHandle}
            ref={provided.innerRef}
            {...provided.dragHandleProps}
          />
          <div>content...</div>
        </section>
      )}
    </Draggable>
  )
}

我希望物品完全移开，适当地填充它们的空位，而不是半途而废。并消除颠簸。

Answer 1

我明白了，那是因为我将 ref 放在错误的可拖动项上，我需要它在最外层的父级而不是嵌套项（拖动手柄）。

为什么 react-beautiful-dnd 在简单列表中拖放时会摇晃？

Why is react-beautiful-dnd jolting on drag-n-drop in a simple list?

javascript

drag-and-drop

reactjs

react-beautiful-dnd