使用 React-Beautiful-DND 拖动时，可拖动 div 给出 100% 的父级

Posted 2023-02-22

【中文标题】使用 React-Beautiful-DND 拖动时，可拖动 div 给出 100% 的父级

【英文标题】：Draggable div given 100% of parent when dragged with React-Beautiful-DND

【发布时间】：2021-04-15 23:28:52

【问题描述】：

我正在使用 react-beautiful-dnd 为比赛室的一些评委创建一个简单的分配屏幕。不幸的是，我的设置给我留下了两个我无法解决的问题。

当拖动“可拖动”div 时，它的宽度 = 其父级 (Droppable) 的 100%，这会导致目标 Droppables 中的元素发生可怕的变换。

现在，当我将第二个 Draggable 添加到给定的 Droppable 而不是水平分配时，因为转换等建议元素最终堆叠在一起并位于其他 Droppable 元素下方。

我尝试在父母中寻找其他转换，我发现修补问题 1 的唯一方法是在 Droppable 上设置固定宽度，但感觉好像这是不好的做法（我没有示例我发现证明这是必要的）。

作为 #1 的附加上下文 - 我查看了 DraggableProps 给出的样式，这表明变换和宽度本身都设置为固定宽度 = Droppable 父级的宽度。

即使只是一些调试方向，我也很感激，因为我意识到像这样搜索整个代码库远远超出预期的标准。

Image of Issue #1 - the horrifying width given for transforms Image of Issue #2 - the stacked elements

完整来源，因为我怀疑这与食物链上游父母的一些错误选择有关： https://github.com/SteRoy/Tabbi3/tree/master/frontend/src/Tournament/AllocationPage

【参考方案1】：

解决方案是 Droppable 中缺少 flex 显示，并且为 Draggable 提供固定宽度基本上解决了宽度问题 - 需要整理一些填充（您可以在上面的专用提交中查看完整分辨率）。