react-beautiful-dnd:当存在多个列表时,在一行中拖动内容会从所有行中拖动相同的索引
Posted
技术标签:
【中文标题】react-beautiful-dnd:当存在多个列表时,在一行中拖动内容会从所有行中拖动相同的索引【英文标题】:react-beautiful-dnd: When multiple lists exists, dragging content in one row will drag same index from all rows 【发布时间】:2020-05-03 16:17:00 【问题描述】:我有一个简单的 react-beautiful-dnd 应用程序,其中有多个行,您可以在自己的行中拖动组件。
我的问题是,当我在一行内拖动 Draggable 时,每一行都会出现内容移动和 Dragged 组件消失的视觉效果。
这是一个演示我的问题的 gif:
这是一个代码框,其中包含问题的交互式演示,并逐步重现问题:
https://codesandbox.io/s/r-b-d-try-2-wgscc?fontsize=14&hidenavigation=1&theme=dark
【问题讨论】:
【参考方案1】:我认为您的问题是由重复使用可拖动 ID 引起的。您的 ID 当前基于正方形的索引。这些将针对您的不同行重复。尝试移动到每个方块的唯一 ID
更多详情请看这里:https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/identifiers.md
【讨论】:
非常感谢,这确实是问题所在。你的链接很有帮助。我通过将 draggableId 设置为与数据关联的唯一 id 来修复它。然而,第二个问题是,因为 id 来源于数据,如果存在多个相同的可拖动数据,它会失败,因为 id 不再是唯一的。我不确定如何拥有不使用索引的唯一 id 的重复数据,但我认为这个问题值得提出自己的问题。再次感谢:)以上是关于react-beautiful-dnd:当存在多个列表时,在一行中拖动内容会从所有行中拖动相同的索引的主要内容,如果未能解决你的问题,请参考以下文章
无法让 React-Beautiful-DND 和 React-Virtualized 一起工作
更改 react-beautiful-dnd 可拖动点击区域
Dragabbale 不会在 react-beautiful-dnd 中移动