时间戳

首页 > 解决方案 > 使用 React-Beautiful-DND 拖动时，可拖动 div 给出 100% 的父级

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

问题描述

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

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

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

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

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

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

问题 #1 的图像 - 为变换提供的可怕宽度 问题 #2 的图像 - 堆叠的元素

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

标签： javascriptcssnode.jsreactjs

解决方案

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

推荐阅读