时间戳

首页 > 解决方案 > react-beautiful-dnd：当存在多个列表时，在一行中拖动内容会从所有行中拖动相同的索引

javascript - react-beautiful-dnd：当存在多个列表时，在一行中拖动内容会从所有行中拖动相同的索引

问题描述

我有一个简单的 react-beautiful-dnd 应用程序，其中有多行，您可以将组件拖动到它们自己的行中。

我的问题是，当我在一行内拖动 Draggable 时，每一行都会出现内容移动和 Dragged 组件消失的视觉效果。

这是一个演示我的问题的 gif： react-beautiful-dnd 拖拽问题

这是一个带有问题的交互式演示的代码框，并逐步重现问题：

https://codesandbox.io/s/rbd-try-2-wgscc?fontsize=14&hidenavigation=1&theme=dark

标签： javascriptreactjsdrag-and-dropdraggablereact-beautiful-dnd

解决方案

我认为您的问题是由重复使用可拖动 ID 引起的。您的 ID 当前基于正方形的索引。这些将针对您的不同行重复。尝试移动到每个方块的唯一 id

有关更多详细信息，请参见此处：https ://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/identifiers.md

推荐阅读