问题标签 [react-dnd]

如何将react-dnd库中的拖放功能应用到Material ui 中的 TableHeaderColumn 组件

问题是react-dnd 不支持自定义标签并建议将 TableHeaderColumn 包装在 div 中，但材料 ui 不允许将表格组件包装在任何标签中:(

我找不到这个主题的任何例子

我正在通过其文档页面上的示例学习 ReactDnD：（gaearon.github.io/react-dnd/examples-dustbin-single-target.html）

我遇到的问题是当我使用 ReactDnD 触摸后端时 DragSource 组件消失了，并且 DropTarget 似乎只检测到 DropSource 的拖动事件。它与 HTML5 后端一起按预期工作。

问题演示（我使用 ReactDnD 页面中的垃圾箱示例，仅将示例的源代码从 HTML5Backend 更改为 TouchBackend）：https ://make2514.github.io/ （请在移动设备上测试此链接 - TouchBackend 在桌面上不起作用默认浏览器）

我只改变：export default DragDropContext(HTML5Backend)(EditorApp); （ReactDnD 在这里按预期工作）到：导出默认 DragDropContext(TouchBackend)(EditorApp); （我遇到了上面的问题）

这是我的 github 存储库，其中包含该问题的源代码： https ://github.com/make2514/Test-TouchBackend-ReactDnD

问题：为了让 ReactDnD Dustbin 示例在移动设备上正常工作，我是否必须进行任何更改（除了将 HTML5Backend 更改为 TouchBackend）？

如果您能给我一些关于 ReactDnD 与 TouchBackend 在移动设备上正常工作的问题或演示的意见，我将不胜感激！

下面是我的拖动源规范的 canDrag 方法：

问题是monitor.getInitialClientOffset返回null，那么getInitialSourceClientOffset和getClientOffset呢？关于此时如何获得鼠标位置的任何想法？

monitor.getDropResult()返回null（我看它console.log）。它应该返回对象（拖动的项目）及其位置。为什么它返回null？

我用 DragSource,DropTarget 为我的组件签名..但它仍然返回 null

这是我的整个组件代码：

我正在尝试将 React DnD 的基本示例应用于我的项目（作为概念证明）并且遇到了一些问题。我正在使用这个例子 - https://github.com/gaearon/react-dnd/tree/master/examples/02%20Drag%20Around/Naive。它只是让你在一个盒子里拖动一些 div。

所以我有一个外部组件（注意：这是实际拖动组件的几个组件级别），它基本上是整个页面（这只是为了测试 POC），看起来像这样：

非常接近示例容器，现在只使用一个字符串而不是 @ 中的那个常量DropTarget。getBuilders 只是在里面渲染其他组件。我在创建 DragSource 组件之前运行了这个组件，一切都运行良好。

因此，我只是将 React DnD 语法添加到我想要可拖动的组件中，如下所示：

所以有了这一切，我在控制台上收到了这个错误（应用程序也在停止渲染）。

奇怪的是，dragsource 甚至还没有被调用到 dom 上，所以我不知道从哪里开始出现这个错误。任何意见或建议将不胜感激。谢谢！

我希望能够在两个卡片列表之间拖放。

基于简单的可排序示例，我成功地构建了两个带有卡片的列表并在它们之间拖放。

出于某种原因，当其中一个列表完全为空时，我无法将卡片放入其中。

这个片段展示了我的问题：

当列表为空时，我无法弄清楚它不会让我将卡片放入其中。

我正在研究一个 react dnd 项目，我正在关注react-dnd 文档。一切正常，但我无法在拖动时滚动。

当我拖动一个项目并到达最后一个可放置的源时，我需要一个滚动条，然后它会自动滚动并允许我将项目放在那里。

如果有人知道如何做到这一点，请与我分享。我将非常感激。

我读到一些用户提到他们正在使用这个支持 Typescript 的库，但是我在任何地方都找不到任何文档，我似乎也无法让它自己工作。

我正在使用 typescript 2，我无法创建一个非常简单的工作示例，只允许我拖动现有组件。我尝试了几种可能性，但在调用 DragSource（作为装饰器或函数）或渲染生成的组件时，我总是遇到一些打字问题。

简而言之，我想要一个示例，显示在 typescript 中使用 react-dnd，它允许我如何使现有组件可拖动，可能无需修改组件本身（它不应该知道它是可拖动的）

感谢您的任何帮助！

我在我目前正在研究的 SPA 中使用 React DnD，它是作为 wordpress 的插件构建的！Wordpress 本机媒体上传器使用 HTML5 onDrop 事件将文件添加到媒体库中，由于我使用的是 React DnD ，我不再能够将文件拖放到 wordpress 媒体上传器中！我知道这个错误已经在 git 问题中报告并在 stackoverflow 中被问到 - 如何避免本机 onDrop 事件被 react-dnd 覆盖？，但遗憾的是，在 git 问题和 stackoverflow 中都没有回应！

我已经使用 react dnd 几个月了，不可否认，它是最好的 react 拖放库，但是像这样的问题使得它很难在大型、多样化的项目中使用它！在花了很多时间安静地学习 React DnD 之后，我不想因为这么小的问题离开它！希望你们能帮帮我！

在 TypeScript + React 项目中，我使用react-dnd和它的definiteTyped类型：

这会在另一个组件中呈现：

这在 TS 1.8 中有效，没有任何错误。当我升级到 TS 2.0 时，出现以下编译错误：

错误:(90, 10) TS2600: JSX 元素属性类型 '(ExampleScreenProps & { children?: ReactNode; }) | （ExampleScreenProps & { children...' 可能不是联合类型。

这是 的类型定义DragDropContext：

我不能把这个放在一起。抱怨的错误是什么？它似乎不喜欢并集ComponentClass<P> | StatelessComponent<P>，但那些不是元素属性，元素属性只是<P>。我尝试明确传递<P>：

但同样的错误仍然存​​在。我可以通过断言输出来解决它：

但我不喜欢使用断言，我不了解实际问题，或者我做错了什么。这是可以修复的打字问题吗？