问题标签 [react-dnd]

我有这样编码的 reactjs 测试项目。

但是当我运行代码时，出现以下错误。

如果您对 react-dnd 和 react-dnd-html5-backend 有丰富的经验，请帮我解决这个问题。谢谢。

我正在使用 React Dnd（带有鼠标后端）来拖动项目，它的工作原理就像一个魅力。但是，我可能有一个我希望能够测试的用例：

从 Source 和 Target 组件外部，了解当前是否存在拖动操作。

我正在寻找一种方法来检测可拖动项目是否可以在当前位置放置。

例如，我想在console.log('I can not be dropped here')每次将可放置项目移动到不可放置的位置时打印。

让我们以下面的伪标记为例：

当悬停dragsource在h1我希望控制台打印时'I can not be dropped here'。

我无法在文档中找到解决方案，不胜感激。

我正在使用 Visual Studio 开发一个项目。我正在使用对打字稿做出反应。在 *.jsx 文件中，一些 npm 模块给出了如下错误：

找不到模块'react-dnd'

我已经将 react-dnd 安装到 node_modules。但我无法停止收到此错误。

这是我的代码。

第 3 行和第 4 行导致错误。此外，我将在下面分享我的 tsconfig 文件。

我必须使用`实现拖放

反应-dnd https://www.npmjs.com/package/react-dnd

我们知道 Redux 让事情变得更容易，但是当我们集成React、Redux 以利用拖放变得复杂时，我这样做时面临以下问题。

• 示例大多来自 ES7 ，
• 连接到 Redux 时不知道“如何调度操作”（以正确的方式），
• 作为初学者很难理解流程

有什么正确的方法吗？或任何简单的例子

我有一个反应拖放前端到棋盘游戏。而且我发现在某些情况下，我无法拖动我期望可以拖动的部分。

我已经能够通过对 react-dnd Chessboard 示例进行细微调整来重现类似的情况，如下所示。

我克隆了最新的 react-dnd 存储库，并确保 Chessboard 示例中的骑士可以按预期移动。然后我编辑了示例的 BoardSquare.js 文件，让 canDrop 始终返回 true：

现在，当我打开应用程序时，我无法拖动骑士。我不确定为什么更宽松的放置策略会导致无法拖动。

关于这里发生的事情以及如何解决我的问题的任何想法？

提前谢谢了。

阿扎德

PS 在 MAC OS/X 上使用 Chrome 58。

我正在努力在 Chrome 浏览器 (58.0.3029.110) 中使用 DragLayer (React DND 2.4.0, 2.4.1 后端)，但这似乎在 Firefox (53.0.3) 中正常工作。

我发现如果我创建一个与 DragSource 尺寸相同的 DragLayer，则 endDrag 在拖动开始后几乎立即触发。

如果dragLayer 较小，只要MouseDown Event 相对于DragSource div 的位置在相同范围之外，预览就会正确生成，并且拖动操作会按预期进行。

我假设这与我的拖动预览有关，我已经设置了pointer-events: none，如DND 演示中所述。

如前所述，这在 Firefox 中运行良好，非常感谢任何帮助。

我对 reactJS 很陌生。我必须autoscrolling使用拖放组件添加功能。这就是我使用 react-dnd-scrollzone 的原因。在使用“ https://github.com/azuqua/react-dnd-scrollzone ”中的示例时，我遇到以下错误：

'Scrollzone' 未定义 'ScrollingComponent' 被赋值但从未使用过

请如果有人可以帮助我并告诉我如何在我的代码中使用它。下面的代码片段显示了我使用滚动区域的几行代码。

我正在尝试在 react-virtualized 中设置 react-dnd 可排序列表List。我正在使用 react-dnd 的示例在这里：

https://react-dnd.github.io/react-dnd/examples-sortable-simple.html

我已经让它大部分工作了，但是当我拖动一个项目时，我悬停的项目不会调整它们的不透明度并正确重新排序。

将其与 react-dnd 中的示例进行比较：

我制作了一个示例项目来演示该问题（https://github.com/ericdcobb/virtual-drag-n-drop），但会将代码粘贴到此处。这是 DragDropContext：

和 DragSource/DragTarget：

我试图让项目在拖动的项目周围流动，就像在示例中所做的那样。似乎在我的实现中，错误的项目变得不透明，并且无法向上或向下移动。

抱歉这里有些含糊不清，我想在屏幕上拖放东西很难说，希望代码和屏幕截图有助于解释我的问题。

谢谢！

我正在尝试安装“react-dnd”并获得：

+-- react-dnd@2.4.0 `-- UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc

npm WARN babel-loader@6.4.1 需要 webpack@1 的 peer || 2 || ^2.1.0-beta || ^2.2.0-rc 但没有安装。

我的项目使用的是汇总而不是 webpack，我不确定如何处理。我的 npm 版本：4.1.2 我的 package.json：

谁能帮我澄清一下？