问题标签 [react-dnd]

我有 2 个项目列表（相同类型），我希望能够在容器之间拖放项目。例如，将橙色组件移动到黄色组件列表中，如下图所示：

每个列表项都有一个表明它是父项的道具，所以我觉得我有必要的信息来完成这项工作，比如在移动事件中检查移动项的父项是否与它当前正在移动的容器匹配。我不知道如果可以使用 react-dnd。有人做过吗？如果是这样，你能举个例子吗？

有没有人尝试在休息时将 react-dnd 或其他库集成到管理员中？我想让datagrid在referencearrayfield中可拖动。

我应该编写自己的组件来覆盖数据网格还是有一种简单的方法来做到这一点？

谢谢！

当将卡片从一列拖到另一列时，isDragging 属性始终为 false。为什么？这个例子有什么问题？

示例：https ://react-wdpn5f.stackblitz.io

代码：https ://stackblitz.com/edit/react-wdpn5f

我有一个使用react-dnd. 有两列，从右侧列拖到左侧激活特定状态项。

在放置时，pushCard()它被调用，它（顾名思义）将拖动的项目推入激活状态数组，即status_data.

但问题是，status_data.push(itemToPush)将新项目推到数组的末尾。我想将项目推到数组的顶部，即数组的索引 0。

status_data.unshift(itemToPush)在这种情况下有效，但unshift只更新后端中的数组state，但不显示array前端的更新。相反，它只会继续推动首先被拖动的相同元素。

GIF 中问题的简单描述。

pushCard：

renderActiveStatuses

renderActiveStatusesrender在组件的函数中调用。

我正在尝试在我的新 ClojureScript 和Reagent应用程序中使用react-beautiful-dnd 。根据这里的博客，它说我需要在我的文件中包含使用的文件。:foreign-libsproject.clj

我已将其配置如下

我从这里得到了我在我的项目中复制的编译文件。尽管经过所有这些更改，我仍然无法使用DragDropContext或Droppable在我的组件中。

在我的组件中，我已将它们声明如下

谁能帮我理解我在这里做错了什么？我收到如下错误

注意：我没有添加任何provide属性，foreign-libs因为我不确定包。另外我不确定是否需要:require在我的core.cljs组件文件中做一些事情。

我正在尝试一个 react-dnd 代码示例：https ://github.com/react-dnd/react-dnd/blob/master/examples/01%20Dustbin/Single%20Target/Dustbin.js

在示例中，name是硬编码的。我需要使用动态name，所以我通过了一个像这样的道具

并将其更改boxTarget为

但是this.props变成undefined了，也许是因为它不在课堂上。是否有任何解决方法，以便我可以name为每个Dustbin组件使用不同的？

我是新来的反应和开玩笑。我正在为使用 dargsource 和 dropitem 的 react dnd 组件编写单元测试。我正在使用酶为它编写快照测试，但它给了我错误：需要 dragdropmanager。

谁能帮我解决这个错误。此外，还有 setState 函数，我们如何使用 jest 模拟这个函数：

如果有人有为拖放组件编写的笑话测试的工作示例，请分享可能有帮助的参考链接。我阅读了一些定义测试方法的链接，但没有相同的示例可以说明这一点。

谢谢 ！！

我有一个名为 DraggableAsset 的组件，它由 DragSource 装饰：

我想参数化'DRAGGABLE_ASSET'字符串。我可以用下面的另一个装饰器来实现吗？

我正在使用 React DnD 和 Redux（使用 Kea）来构建表单构建器。我的拖放部分工作得很好，并且我设法在元素掉落时调度了一个动作，然后我使用调度更改的状态来渲染构建器。但是，为了以正确的顺序渲染元素，我（我想我）需要保存相对于它的兄弟姐妹的放置元素位置，但我无法弄清楚任何不是绝对疯狂的东西。我已经尝试过使用 refs 并使用唯一 ID 查询 DOM（我知道我不应该这样做），但是这两种方法都感觉很糟糕，甚至都不起作用。

这是我的应用程序结构的简化表示：

工作台：

场地：

侧边栏不是很相关。

我的状态是一个平面数组，由可用于呈现字段的对象组成，因此我根据 DOM 中的元素位置对其进行重新排序。

这个问题的相关部分围绕

我想我只是以某种方式获得对元素的引用，但它似乎还不存在于 DOM 中。如果我尝试用 ReactDOM 破解，也是一样的：

我如何实现我想要的？

为我对分号的不一致使用道歉，我不知道我想从他们那里得到什么。我恨他们。

我想使用 React DnD 库，我想支持桌面和移动。如何在运行时将后端切换到 HTML 5 或 Touch？