问题标签 [react-dnd]

我正在使用 React DnD 来处理 React 应用程序中的拖放操作。我正在使用触摸后端。在这个实现中，我使用了自定义拖动预览。拖动时，我通过将其最大高度设置为 0 来隐藏“被拖动”的元素。自定义拖动预览在用户拖动时显示。如果用户将元素放在不允许的区域中，则“被拖动”的项目将动画回其原始高度。这很好。

当项目被删除时，我发送一个 redux 操作，重新排序项目列表并将先前拖动的元素放入其新位置。

但是，在 DOM 更新并在其新位置为项目设置动画之前，拖动的项目会在其当前位置闪烁。

isDragging最大高度动画由在is时添加和删除的 CSS 类控制true。

我浏览了 React DnD 文档和示例（通常非常详尽），并查看了其他一些使用 React DnD 的开源项目，但似乎找不到解决方案。我假设我错过了一些简单的东西，比如我可以通过的道具。本质上，我想isDragging一直true等到放置操作完成，或者能够在endDrag可拖动目标上的方法或可放置目标drop上的函数中更新道具。

我可以使用 vanilla javascript 来更新方法的classList内部endDrag，但如果可能的话，我更喜欢使用 React 工具。

有没有人遇到过这个问题？

我正在创建一个表单构建器，并且需要能够重新排序字段，所以我想将所有样板拖放代码保留在一个可重复使用的位置，并且更高阶的组件似乎是一种好方法那。所以我有一些这样的代码：

该代码上方是所有样板拖放代码。

我认为将每个字段类型组件包装在其中。问题是如果我运行它，我会收到以下错误：

Uncaught TypeError: Cannot call a class as a function

我认为这是因为它不喜欢我将 SortableField 函数传递给 DragSource / DragTarget 部分函数。有没有办法使这项工作？

如何使用鼠标光标使源元素移动react-dnd？

这就是我正在做的（简化示例）：

当我单击并拖动它时，文本会从DND变为YAY，但 div 不会跟随鼠标移动。

我经历过的示例似乎没有手动更新目标 x/y 坐标，我假设这是由库本身管理的。我错过了什么？

编辑：

我没有提到在 Chrome devtools 中模拟移动设备时会发生这种情况。它在桌面模式下按预期工作。

我目前正在考虑使用这里DragLayer看到的移动拖动源；

我正在使用来自“ react-virtualized ”的表。一切都很好。

我使用rowRenderer自定义我的行以添加“ react-dnd ”并让我的行能够被拖动。

我的问题是关于细胞的。是否可以自定义它们？像使用一些 React 组件作为单元格内的下拉菜单一样吗？

一切都存储在 { columns } 道具中，但不知道如何使用它。

非常感谢这个惊人的库。

我正在尝试将 DND 用于 2 个容器。

1) 容器有静态数据形式 axios => 任务列表。2）容器只有设置给用户的任务。

当我（通过选择）更改用户时，X => YI 必须刷新Container(2)的数据。

Mythis.state.userTasks令人耳目一新，但子组件Container(2)仍然具有相同的元素。

这是因为我使用构造函数来传递数据。构造函数被调用一次。我知道。

我不能使用componentWillReceiveProps(nextProps)到Container (child) 因为我只需要更新Container(2)并且当我将元素从Container移动到Container(2)时调用此方法

更改用户时如何更新 Container(2) 卡？你有什么想法？

粗略总结一下，我使用的是如下结构（使用 Redux）：

现在，在所有 DragSources 中，我正在监听beginDrag事件并触发一个操作，该操作使用有关当前正在拖动的项目的一些信息更新存储 ( draggingElement)。 MyComponent获取此信息作为属性传递，但除了将其传递给所有 DropTargets 外，不以任何方式使用它，仍然作为属性。现在，在所有 DropTargets 中，我根据被拖动的元素是否可以拖放到那里来呈现一条消息。

到目前为止一切顺利，不幸的是，一旦我开始拖动一个元素，我就会收到以下错误消息：

似乎MyComponent一旦它收到带有有关拖动元素的信息的属性，它就会在 DOM 中完全被替换。并且由于拖动元素也是 的子元素MyComponent，因此它也会被替换并且拖动操作失败。如果我将以下代码放入MyComponent一切正常：

但是现在 DropTargets 也不再重新渲染（因为它们是 的子级MyComponent）并且不显示所需的信息。

我能做些什么呢？MyComponent具体来说，如果新属性只影响其中的一小部分，为什么要完全替换 DOM ？

我有一个 DragSource 和 DropTarget 作为父母的孩子

如何从父母那里收听 DragSource 的 isDragging 道具？

我正在尝试使用 Rails5、动作 Cable、React 和 Rails 以及 React DnD 制作 POC。

目的是制作像 trello 这样的应用程序，但用于招聘过程。

我的前面是 ReactJS。

我有 3 个组件，首先，容器调用“Candidates”，该组件调用 2 个“CardBoard”组件，这些组件调用“Card”组件。

我用户对可拖动卡片和可放置 CardBoard 的 DnD 库做出反应。当我将卡片放在纸板上时，我使用 post call 和 websocket（来自 rails5 的操作电缆）来更新我的状态。我不明白为什么我在电话后收到此消息：

候选人.jsx =

CardBoard.jsx =

Card.jsx=

为了更好地理解，这里是我的功能和他的错误的 gif 图像： 有错误的功能

这是我的 github repo 与所有代码

这就是问题所在，当使用普通的 ReactJS （没有 React DnD）时，Babel 和 Webpack完美地编译了我的 .js 文件，但是在我的项目中尝试使用 React DnD时，使用 Webpack 和 Babel 编译 js 时出现此错误：

这是我的webpack.config.js文件

这是我的.babelrc文件

这是我的package.json文件

如何解决这个问题？这个问题的原因是什么？谢谢

需要考虑的要点：

• 这个例子是虚构的，但说明了问题。
  
• 在实际应用程序中使用全局存储，并且在 itemTarget 的 hover() 方法中发出动作更改。这里，为了模拟全局存储，使用了 window 对象。
  
• 不允许使用 ES7 装饰器（或其他 ES7 语法）。
  

所以，问题是在下面的实现中，当拖动时，没有调用 itemSource 的 endDrag() 方法。
可能的解决方案是创建不同（但实际上相同）的组件，这些组件仅因项目类型而异，将这些组件导入到 Container 组件并根据 props.itemType 进行挂载——因此，它不是 DRY 选项。

问题是： 1. 怎么做才对？如何在 DragSource/DropTarget 中重用和渲染依赖于 Container 的 props itemType 的可拖动组件？2. 为什么下面的解决方案不起作用？为什么没有调用 endDrag() 方法？

容器.js：

项目.js：

ItemDnDDecorator.js：