问题标签 [react-beautiful-dnd]

我在让 react-beautiful-dnd 工作而不闪烁时遇到问题。我遵循了蛋头课程中的示例。这是我的代码示例。

项目列表容器

项目类别

列出项目

项目

重新排序项目的方法（我正在使用 Mobx-State_Tree）

样本数据

当和项目被拖放时，我检查该项目是否被放置在 dnd 上下文之外或放置在它被拖动的相同位置。如果是真的，我什么都不做。如果该项目被丢弃在上下文中，我检查它是否被丢弃在同一类别中。如果为真，我将项目从其当前位置移除，将其置于目标位置，更新我的状态，并进行 API 调用。

如果它被放到不同的类别中，我从源类别中删除该项目，添加到新类别，更新状态并进行 API 调用。我错过了什么吗？

我正在尝试使用 react beautiful dnd 为 html 网格系统（行和列排列的划分）实现拖放。

代码可以在这里查看（这是从这里分叉的）

我所做的更改是从 droppable 中删除类型，因为我希望列也可以放入父容器中。

我面临的问题是子项目不能在父容器中向上拖放，它可以毫无问题地向下拖动。父容器可以上下拖动

我正在使用 react-beautiful-dnd 复制并将元素放入先前创建的列中。

但是我想知道当我拖动一个元素并放下它时是否有任何可能性，它会动态地为我创建列来放下它？我能做到吗？

如果 react-beautiful-dnd 不起作用，React 的其他插件可以做到吗？

任何建议..

Jest is using the wrong version of core-js when building components that import from react-beautiful-dnd. However, at runtime, there is no problem and our pages build successfully.

We are building a kanban board using react-beautiful-dnd. At runtime, everything is fine and the library works really well: pages load, components are draggable where they should be draggable, etc etc.

However, it is causing problems in our tests (we are using jest and enzyme). When we try to test components that import from the react-beautiful-dnd library, we hit errors like the following:

The issue appears to be that react-beautiful-dnd depends on @babel/runtime-corejs2, which depends on core-js2. Our app is running @babel/core 7.5.5 and core-js 3.2.1. The folder structure of core-js3 is completely different, and so when jest tries to access its files, the paths are wrong.

Because these errors are not replicated at runtime, it seems that the issue must be with our jest/testing configuration.

We have managed to work around this problem by mocking the react-beautiful-dnd library in all tests of components that depend on it, but this is a bit frustrating and I was wondering if there is a better solution that simply configures jest to use the correct version of core-js in the same way as the runtime.

Our babel config:

Our jest config:

Jest setup:

我正在使用 react-beautiful-dnd 处理拖放场景，尝试按照手册https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/添加拖放动画拖放动画.md。

isDragging当我将属性添加到一个简单的 div 元素时，使用 typescript 我遇到了麻烦。试图解决这个问题，我正在构建一个具有扩展属性的组件，如下

在 Typescript React App 中指定特定的道具并接受一般的 HTML 道具

这在某种程度上有效，但在 ref 属性上失败了。

我的代码：

像这样称呼它：

这会导致以下错误：

任何想法，有没有另一种方法来解决这个问题？

有没有办法取消 react-beautiful-dnd 的 Draggable 对象的放置动作？我有一个项目列表，其中一个项目始终位于最后一个位置。

如果项目被拖到最后一个项目下方，我想禁用（或至少正确取消）放置。我知道我可以从可放置组件和区域中排除最后一项，但这不是一个选项。

我正在尝试将 beautiful-dnd 转换为功能组件并将它们拆分为不同的组件，但我只是想知道为什么这会引发错误？

谢谢，

我尝试使用“react-beautiful-dnd”，并在现有项目中实施。我正在使用的软件包版本是 10.1.1，因为我不能使用更高的版本。

我尝试将占位符放置在不同的 div 中，并为可放置元素提供。

当我拖动一个元素时，我收到以下警告： Droppable setup issue [droppableId: "drop1"]:DroppableProvided > placeholder could not be found. Please be sure to add the {provided.placeholder} React Node 作为 Droppable 的子级.更多信息：https ://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md ‍这是仅用于开发的消息。它将在生产版本中删除。

是否可以在不同组件中呈现列并能够从 B -> A 和 A -> B 拖动项目

Component A 中总是有1 列， B 中总是有 1+ 列。我不确定我该怎么做？我需要两个 DragDropContext 到 A 和 B 中的一个吗？有人可以给我一些关于如何实现这一目标的指导吗？

这是一个工作示例：

目前，这可能是组件 B，但是如果我尝试实现组件 A，我如何在两者之间移动项目。

我正在使用带有 Antd 表的 react beautiful dnd 来实现拖放功能。一切正常，但我有以下奇怪的效果。

当我将项目拖放到其原始位置时，甚至会发生这种效果。

任何与 Antd 一起使用 react-beautiful-dnd 的人请帮助我。