问题标签 [react-beautiful-dnd]

我有一个sandbox，我试图让 react-beautiful-dnd 工作。它必须具有水平移动列的能力。

但是，正如您在控制台中看到的那样，我收到以下警告（尝试拖动列时）：

我想知道这是否与应用程序未找到占位符这一事实有关？

任何人都可以发现我做错了什么？

这是我在 onBeforeCapture() 响应程序期间找到的用于检索正确的可拖动元素并编辑其尺寸的代码。在此响应程序期间更改尺寸符合文档。这似乎只适用于改变尺寸，其他问题是我使用的是 renderClone 方法，因此可拖动对象只是以不接近正确鼠标位置的巨大偏移进行拖动。dnd 也将放置占位符视为可拖动是原始的大尺寸。有没有办法纠正这个鼠标位置和占位符尺寸？我已经考虑在可拖动的内部元素上添加 mouseDown/mouseUp 处理程序，但这似乎也不起作用。

我已经用react-beautiful-dnd. 它按我想要的方式工作。

我希望能够在div具有overflow: hidden. 但是，这样做可以防止在视口之外的列中拖动卡片，屏幕不再水平向右滚动。

我正在简化问题，我需要这样做的原因是因为我使用的是 Layout 组件，该content组件是带有overflow: hidden.

这是一个演示问题的代码框

基本上，这是可行的，我可以将 Card 拖放到右侧，它会水平滚动：

这不会：

也许有一种方法可以像这样重置第一个 div？：

我正在尝试实施react-beautiful-dnd. 他们有我遵循的视频指南，并多次检查并将我的代码与视频中的代码进行比较，但我一直收到此错误。

我将在这里发布我的代码，但我也在这里设置了一个沙箱：

https://codesandbox.io/s/xenodochial-euclid-m5sfk?fontsize=14&hidenavigation=1&theme=dark

我正在尝试设置react-beautiful-dnd. 我有 4 个文件。索引、列和单个项目（在我的代码中称为任务，因为这是一个待办事项应用程序）：

指数：

列.jsx：

任务.jsx：

初始数据：

它与我认为的 innerRef 有关，但无法理解我在做什么不同

我正在尝试用漂亮的 dnd 构建一个可重新排列的材料 UI 列表。除了列表中的 ListItemSecondaryAction 外，一切正常。(ie) 当我拖动一个列表项时，ListItemText 和 ListItemIcon 是可拖动的。ListItemSecondaryAction 仅保留在同一位置，并且仅在删除该特定项目时才重新排列。

您可以在沙盒链接中尝试相同的方法：https ://codesandbox.io/s/4qp6vjp319

更改 ListItemSecondaryAction 的位置并没有解决问题。

我正在尝试构建一个简单的可拖动对象实现，react-beautiful-dnd但显然我的可拖动对象不会移动。

这是我在 CodeSandbox 中的示例代码：

https://codesandbox.io/s/using-react-beautiful-dnd-with-hooks-zqpi9?fontsize=14&hidenavigation=1&theme=dark

我正在使用这个很棒的 react-beautiful-dnd库让用户通过“拖放”重新排序项目列表。它工作得很好。我遇到的唯一问题是用户何时删除列表中的一项。似乎“可拖动”组件在卸载后不会自行清理：

如您所见，“setItems”被传递给“DraggableItem”组件，以便它可以在删除项目后更新状态。

它正确更新了状态，一切都很好，但我在浏览器控制台上收到了这个“警告”：

通过调用“setItems”更新项目后我应该如何清理？

我正在研究 React 和 DND，我正在尝试一个示例。例如，我有两列可以在它们之间来回拖放卡片，效果很好，现在我希望第二列包含不超过 4 个项目，但可以拖出项目。在我读到的文档中，这是通过将 ' isDropDisabled' 设置为true. 那我确实不能再拖到这个专栏了，我可以离开了。现在我尝试用this.state.isUnlocked变量来影响它。因此，如果有超过 4 个，则此值为 true，否则此值为 false。只有代码不响应this.state.isUnlocked。只有当我直接输入它但它不再是可变的。有没有人可以帮我解决这个问题？

到目前为止，这是我的代码：

目前右列包含 2 个项目，当有 4 个项目时，应该不再可以添加项目，只需将其删除即可。

我已经在一个 React 应用程序中成功实现了 Beautiful DnD，其中可拖动的项目是 Material UI 扩展面板。我有使用 onDragEnd 并将新排序列表保存在状态中的项目列表。

我正在使用 React 钩子、useState、Material-UI 扩展面板和 React-Beautiful-DnD。

当应用程序的这一部分加载时，第一个扩展面板被展开，所有其他面板被折叠。

我一直在尝试的是如何关闭扩展面板 [onDragStart | onBeforeDragStart | onDragUpdate] 然后打开扩展面板 onDragEnd。

我已将每个扩展面板的状态以及其他信息存储在一个数组中，该数组循环并呈现每个扩展面板：{ name: string, expand: string, ... }

我认为这是一个状态没有更新到扩展面板没有接受更改的问题。

我尝试在项目上使用 snapshot.isDragging 来更改扩展面板的展开状态，甚至尝试针对特定的扩展面板，在状态列表中找到相应的项目并更新扩展的道具 onDragStart、onBeforeDragStart 和 onDragUpdate。到目前为止，这些都没有奏效。

这是处理 DnD 的组件的一部分

这是容纳扩展面板的组件：

在进行 dnd 操作时，如何在其原始列表中保持可拖动？例如，我想拖动项目“复制”并同时保持它的原始位置。在onDragEnd我可以复制数据之后，但在拖动时它看起来不对并且可能会使用户感到困惑。（未在官方列表中找到示例）