问题标签 [react-beautiful-dnd]

我想将一个元素从另一个元素移到另一个元素DragDropContext：

我有一个：//sidebar.js

// footerDroppable.js

// 结构

我可以将可拖动的元素从页脚移动到侧边栏/反之亦然？

当然，我可以只移动DragDropContext两个组件的父级（我知道该怎么做），但是除了有一个父级之外还有其他DragDropContext方法吗？

PS上面的代码不是确切的结构/代码，而是更像一个原型，所以你可以可视化，因为我正在开发一个更大的应用程序。

尝试使用 react-beautiful-dnd 创建可拖动的项目，但找不到它为什么如此“跳跃”。移动项目并释放它后，拖动的项目和其他项目正在移动和缩放（参见包含的图像 gif）。仅当将项目/卡片拖到列表末尾时，它才会在没有任何动画的情况下稳定下来，这就是我想要拥有它们的方式。

在基于 javascript 的 css 中使用 material-UI 样式和 flex 以使容器与项目居中。

还尝试按照建议跳过放置动画但没有成功：https ://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/drop-animation.md

在文档中它说：

DragHandleProps需要应用到您想成为拖动手柄的节点。这是需要应用于<Draggable />节点的一些道具。最简单的方法是将道具散布到可拖动节点（{...provided.dragHandleProps}）上。但是，如果您还需要响应它们，也欢迎您对这些道具进行修补。DragHandleProps将null何时isDragDisabled设置为true。

dragHandleProps类型信息

我想附加onDragStart到 ，Draggable以便仅在拖动特定的一组元素时触发它（而不是将其附加到DragDropContext）。使用我做的文档中的示例：

但是它似乎不起作用。任何想法如何使它工作？

是否可以调整可放置容器的高度？我尝试了内联样式

<Droppable droppableId="list" style={{ height: 200 }}>

但没有产生预期的结果。我的期望是容纳可拖动项目的容器可以调整到一定的高度 x 并且可拖动项目的溢出将是可滚动的。我还尝试<DragDropContext onDragEnd={this.onDragEnd}>使用以下div标签进行包装：

<div style={{ height: 200 }}>

https://codesandbox.io/s/using-react-beautiful-dnd-with-hooks-qnez5

我试图在我的组件被放到一个新位置后对其进行动画处理。我react-beautiful-dnd用于拖放。

这种情况的沙箱示例

在这里您可以看到，当我将一个元素从一个列表拖放到另一个列表时，该拖放的项目首先会下降到列表的最后一个位置，然后直接进入可放置列表的第一个位置。放下时，使用过渡将其放下，但在将其推到第一个位置后（此处 react 会重新渲染），它只会更新视图而不进行动画处理（我知道这是正常行为）。我试图为这些元素添加过渡，但这对我没有帮助。有没有办法做到这一点？

我正在使用 react-beautiful-dnd 并从教程中复制代码来构建一个可拖动的列表。它起作用了，看起来像这样：

这是构建它的代码：https ://github.com/DDavis1025/react-beautiful-dnd

但是现在我正在尝试实现我自己的列表，这是一个播放列表，它使用输入将用户计算机中的歌曲添加到列表中：

它部分工作，但我无法将列表项拖动到位（它总是回到相同的顺序）。这是我更改的代码：

列-test.jsx

（这是我添加输入和 fileReader 以将文件添加到我的文件数组并使用 .map() 函数在 render{} 中的 return() 中迭代这些文件的地方）

任务-test.jsx

在学习如何使用react-beautiful-dnd库时，我发现（在构建库所需的结构时）如果我在主应用程序之外定义组件，它适用于 React，但不适用于 Gatsby（开发），它开始工作，但随后出现错误

但是如果我在主应用程序中移动这些组件，那么它也适用于 Gatsby

示例代码：

因此，如果Columns和Elements在外部定义，它就不起作用（但它适用于 React）

为什么会这样？

（沙盒：https ://codesandbox.io/s/using-react-beautiful-dnd-with-hooks-bfwzl?fontsize=14&hidenavigation=1&theme=dark ）

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

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

这是一个演示我的问题的 gif：

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

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

我最近一直在尝试使用 react-beautiful dnd 构建一个类似 trello 的应用程序。我可以让可拖动元素来拖动元素，但是当我抓住要拖动的元素时，所有可拖动元素都会随之拖动。我一直在阅读 react-beautiful-dnd 的 egghead.io 课程和文档，但仍然无法弄清楚为什么所有的可拖动对象都在拖动。

这是我的 droppable 代码示例：

这是我的可拖动项目的代码：

这些都在类组件的 render 方法中。在此先感谢您的帮助！

Github 上的相同问题 - https://github.com/atlassian/react-beautiful-dnd/issues/1712

问题：

是否可以处理isDraggingOver何时isDropDisabled为真？我想在关闭时用红色边框突出显示列表。

Codesandbox - https://codesandbox.io/s/loving-bush-kz3b1

代码：
_{例如我们有两个列表}