问题标签 [react-beautiful-dnd]

我一直在关注 Egghead 的官方课程（https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd和示例工作代码：https ://codesandbox.io/s /52p60qqlpp）并写道：

https://codesandbox.io/s/00k3rwq3qn

但是，它实际上并没有拖放。我查看了几个示例，但无法在我的代码中发现问题。我非常感谢有人反馈我的错误是什么。

谢谢

发生的情况是，当我在一列中有多个项目并尝试拖动一个时，只显示一个，根据此处找到的课程，我应该可以在同一列中移动项目但不能。在 React 开发工具中，状态和 rb-dnd id 看起来不错，但我知道什么？我只是一个菜鸟。这是我onDragEnd到目前为止所拥有的。

我的应用程序可以在这里找到。谢谢。

我在将组件放入应用程序的下一个列表区域时遇到了困难。我可以在父列中完美地拖放和排序，但不能将组件拖放到其他地方。这是我的 onDragEnd 函数中的代码：

从我一直在使用的教程中，我猜我只需要更改状态......我已经记录了几乎所有内容并检查了异常状态，但我没有看到问题。我的演示代码可以在这里找到。谢谢。

由于某种原因，在使用 react-beautiful-dnd 包时，每秒钟的拖动效果都不是很好（见图）

我的 onDragEnd 函数如下所示：

拥有返回子组件的 getNodes

不确定这种行为的责任是什么..有什么想法吗？

当我将 isDragDisabled 设置为 true （硬编码）时，我收到这样的错误

我的可拖动组件是

和 droppable 是：

你可以找到代码沙箱https://codesandbox.io/embed/github/softmantk/react-dnd-example/tree/test-drag-disable/

如果 isDragDisabledprop 从文件 components/task.js 中删除，它将运行良好。

有没有办法在组件之间拖放？我有两个完全相同的组件（在数据结构和 UI 方面）。第一个组件上的一个按钮展开第二个组件，我想在其中拖放项目。我相信仅使用 React 是无法实现的。

我觉得我快到了，但这并没有改变我被卡住了。我制作了整个应用程序<DragDropContext>并<Draggable>编辑了必要的区域。当我将项目拖到另一个组件时，它们首先尝试在该组件的列表中占有一席之地，但它们不适合（我可能需要使用 REDUX 传递每个 Droppables 的 DroppableIds）并且它们返回到它们的起点。

索引JS如下：

Component1如下：

我有包含项目的列。目前，根据我从 复制的代码react-beautiful-dnd，列和项目都是可拖动的，并且运行良好，但我不希望列可拖动。

如果我删除该<Draggable/>组件，React则会对使用函数作为孩子感到不安。我已经尝试了很多其他的东西，没有任何运气。有关如何从此组件中删除列拖动功能的任何建议？

我正在尝试使用 Material UI 和 react-beautiful-dnd 创建一个可拖动的列表。我按照他们页面上的教程创建了这个-

它不断地给我

错误虽然我在 'div' 上设置了 innerRef 。这里有什么错误

大家好，我正在努力学习 react-beautiful-dnd，

我遵循所有官方教程并尝试阅读文档，但根本不是很清楚。

但是如果我想渲染一个复杂的数据集呢？

只是为了更好地理解我的问题：

我有一个复杂的反应组件：

该组件设计复杂，道具中的数据将是动态的。有没有办法在 react-beatiful-dnd 中重用这个组件？还是我必须按照 react-beautiful-dnd 逻辑重写所有内容？

如果我不能重新使用它，我可以从哪里开始重写内容？

在教程中，initialData我们使用了这个对象：

在下图中，您将看到 initialData 内容是如何重排的。

这是主要组件的html

I'm trying to implement drag and drop behaviour using React and react-beautiful-dnd library.

I want to chose some images using react-dropzone library and after choosing images I show thumbnails on the right side of the screen and after that I want to be able to drag one of those thumbnails to the left side and drop it to one of those containers.

My code is as follows:

Here is the example code on codesandbox.

The photo's are successfully added to the right side where I render the thumbnails but I cant drag one of them then to the left side.

Any idea how to solve it?