问题标签 [react-beautiful-dnd]

react-beautiful-dnd 尚未定义用于测试组件的推荐方法。但是，这有点阻碍了我。

我可以通过按照以下建议react-beautiful-dnd将它们包装起来来测试我的组件：DragDropContext

然而，这似乎是一种次优方法。相反，我想模拟react-beautiful-dnd，但我不知道如何正确地做到这一点。

说，如果我的List组件是Droppable这样包装的：

如何使用该render prop方法（哪个Droppable）为组件编写模拟？

以上适用于higher-order component. 如何将其更改为适用于实现render prop?

我正在使用 react-beautiful-dnd 创建一个类似 trello 的组件，但是可拖动对象在拖动过程中不可见，我正在努力找出原因。

在此处查看 gif

这是相关代码：这里

感觉好像和这个有关系

但我很难过

我正在使用这个库来响应拖放功能。但是，我的 json 是这种格式

但是，所有教程点，我都需要这样的东西：

那么如何修改我的 json 并为拖放功能添加 id。即使有任何其他方法可以实现这一点，我也非常感激。

我正在使用 react-beautiful-dnd 创建要从右卡移动到左卡的可拖动文本条。我希望可拖动的文本条出现在标签下，但标签都放在几行中。

例如，如果我有三个标签，“标签 1”、“标签 2”、“标签 3”，所有标签将放在一起，它们将显示为“标签 1标签 2标签 3”，但我希望它看起来像

“标签 1

[可拖动的文本栏]

标签 2

[可拖动的文本栏]

标签 3

[可拖动的文本栏]"

我使用 Material-UI 的 InputLabel 组件作为我想要的标签。代码如下所示：

我尝试将可拖动对象包装在一个 div 中，这样我就可以给它一个名称和 ID。

下面是整个代码

预期成绩：

“标签 1

[可拖动的文本栏]

标签 2

[可拖动的文本栏]

标签 3

[可拖动的文本栏]"

实际结果：

“标签 1 标签 2 标签 3

[可拖动的文本栏]

[可拖动的文本栏]

[可拖动的文本栏]"

我有一个基于似乎对人们有用的命令的拖放测试。react-beautiful-dnd该命令触发可以理解为拖放交互的鼠标事件。它在 Cypress GUI 中运行良好。我可以看到列表项正确拖放并且测试通过。但是，当我运行我们在 CI 中使用的 Cypress Electron 浏览器时，它不起作用。尽管赛普拉斯通过我的选择器正确地找到了可拖动元素并调用了相同的鼠标事件触发器，但没有报告任何类型的错误，但我没有看到列表项移动。

我的假设是 Cypresstrigger方法在触发 Electron 浏览器中的某些事件时存在一些问题。非常感谢任何提示或建议！

依赖项：

代码：

我有一个组件接收两组数据并且是一个 react-beautiful-dnd DragDropContext如下

到目前为止，此代码运行良好，并且根据MyDraggableCompdnd 实施指南正确实施并包含{...sectionProvided.dragHandleProps}

现在已经更改了后端并且dataSetTwo永远不会为空或为空，因此想要删除条件并始终呈现它。

但移动的dataSetTwo>0条件，只是有

导致我什至不了解与案例的关系以及要搜索什么的错误？有人可以向我解释发生了什么以及如何解决吗？

我使用 react-beautiful-dnd 练习的简单应用程序无法按预期工作。列表项不拖动而只是创建一个相邻的占位符。我读到可拖动的边距会产生意想不到的后果，但摆脱引导样式仍然不能改善问题。这是应用程序：https ://codesandbox.io/s/53j0kvnw14

我尝试了各种选项，但无法在使用 Selenium 的浏览器中模拟鼠标单击以将元素从一个位置拖动到另一个位置。测试运行时，我看到元素被选中，但它没有移动到指定的放置点。非常感谢任何建议或见解！

这是我在最近一次尝试中定义函数的方式（这个主题的变体也尝试过但失败了）：

还尝试了以下（相同的结果）：

在测试中，使用 xpath 唯一标识 2 个元素并调用该函数：

相关库：

我正在为我的项目使用 react-beautiful-dnd。

我正在尝试使两个可拖动的交换位置（在可放置对象之间）。基本上我只允许每个droppable 1个可拖动的。

一切正常，除了一部分。当我拖过它们时，“移开”功能会不断将可拖动对象移开，但我不希望那样。

有谁知道不将可拖动的东西移开的方法？

我创建了一个带有可拖动行的可拖动拖放表。
我正在使用react beautiful-dnd这个。
当我拖动一行时，该行不在我的光标位置上。
当我拖动一行时，该行得到position: fixed一些top和left样式。
我怀疑这就是问题所在，但为什么它会得到错误的数字，从而导致无法显示在正确的位置？
此GIF将显示问题。

这是我的完整代码：

有谁知道为什么我的可拖动项目会错位？
我使用的唯一 css 是bootstrap和我的代码中的 css。