React-dnd: 谁使用 React DnD？

• 项目： https ://github.com/WikiEducationFoundation/WikiEduDashboard
• 有用性：非常
• 问题：状态驱动的动画是最难的部分。 我最终得到了 react-motion 和 react css 过渡组的组合。 然后我必须为动画中间的东西管理额外的状态，以防止它们在动画时成为掉落目标。 我最终使用了https://github.com/yahoo/react-dnd-touch-backend ，它有它自己的问题（在拖动过程中选择了文本），但在 _during_ 动画中更可控。 我可能在这个功能上花了大约 4 个工作日来制作正确的动画，这在非反应应用程序中可能会花费更少的时间。

_- 你在什么产品中使用 React DnD？_

我在各种应用程序（看板、业务线应用程序）上使用它

_- 你觉得它有多大用处？_

在 React DnD 之前，我已经尝试了所有我能找到的 DnD 解决方案，包括基于 react 和 jquery 的，并且 React DnD 遥遥领先。

_-您多久遇到一次问题，他们有多沮丧？_

自 1.0 以来，我没有遇到任何问题。 值得注意的是，我只在我的产品上支持现代浏览器。

_- 你关心哪些功能？_

我在不同领域以不同的组合使用所有的功能。

_- 可以附上几张你们产品的截图吗？_

我昨天刚刚将它与一个私人项目集成（我现在不能提供屏幕，抱歉）​​，我发现现有的文档非常棒。 该方法干净、易于理解、易于扩展且整体友好。

老实说，我还没有真正遇到过套件的任何问题。 我认为它的简单性确实是最大的特点，而且它鼓励使用它的人转向像 HOC 这样的最佳实践。

你在哪些产品中使用 React DnD？

我们在 Treasure Data 的新 Web 控制台中使用它。 我也将它用于个人项目。

你觉得它有多大用处？

很有用。 它很容易成为我用过的最好的拖放库。 我非常有信心它可以用来轻松实现复杂的拖放交互。

你多久遇到一次问题，他们有多沮丧？

每次我使用这个库时，我都需要一段时间来记住它是如何组合在一起的：每个部分的去向和作用。 即使在多次使用后也会发生这种情况。

也许有一个可视化来显示所有部分会更容易记住。

总的来说，图书馆似乎做了我需要做的一切。

您关心哪些功能？

可测试性！ 我以前的拖放经验相当差，没有人测试他们的拖放相关代码。

我没有做过任何类型的移动支持，但我不知道如何同时针对桌面和移动设备。

我见过react-dnd-touch-backend ，但我不知道如何将两者混合。

你能附上几张你的产品的截图吗？

https://gfycat.com/ScientificEvilAmericanbadger

这基本上只是我在玩。 react-dnd 使实现文件放置区变得微不足道。

你在哪些产品中使用 React DnD？

codecks.io 仍在开发中，但接近抢先体验

你觉得它有多大用处？

很多。 规范化浏览器行为并提供一种反应方法来 dnd 使这个库对我来说很容易

你多久遇到一次问题，他们有多沮丧？

文档很棒，但是在开始使用它时，我遇到了令人惊讶的问题，即它在没有错误消息的情况下无法正常工作，我无法可靠地重现它，但可能与零高度拖动目标有关。

您关心哪些功能？

浏览器标准化，支持触摸交互

你能附上几张你的产品的截图吗？

https://gfycat.com/CleanLegitimateAracari

我在医学影像档案搜索引擎的博士工作中使用了 React DnD。 它允许我拖动搜索结果成为查询的一部分（产生相似的图像）。 如果没有这样的库，我将不得不使用 HTML5 API 并确保它与 React 一起工作得很好。 任何能让我专注于更重要的事情的东西都是金子！

我没有遇到任何严重的问题，但是从 0.x 到 1.x 的过渡非常令人困惑，这是一个很好的例子，其中 dist 标签没有正确使用（1.0.0-rc 发布为latest没有更新文档）。 无论如何，这都是桥下的水。 :)

1.0.0-rc 在没有更新文档的情况下作为最新版本发布

是的，这是在我了解 dist-tags 如何工作之前。 ：喜悦：

你在哪些产品中使用 React DnD？

将它用于具有大量拖放交互的客户端项目。 一些值得注意的组件是：

• 一个树视图，您可以在其中对节点进行排序和嵌套
• 类似于 Trello 的列表/卡片视图，仅支持排序。

它也是一个协作工具，因此大多数接口更新都被分派到套接字服务器。

你觉得它有多大用处？

非常有用，很容易将拖动逻辑与组件分离并单独测试。

你多久遇到一次问题，他们有多沮丧？

支持嵌套和排序的树视图我们面临很多问题，

我们遇到的一个更大的问题是实现支持嵌套和排序的树视图。

我们有不同类型的节点（文件夹、列表）。 用户可以在文件夹上放置一些东西，这将导致它嵌套或在另一个节点的下方或上方对其进行排序。 这种交互伴随着很多闪烁、一些错误的行为以及偶尔的性能下降。 看这个视频： http ://s.2to1.be/fAtX，

它的工作方式如下：

1. 用户开始拖动一个节点，该节点停留在它的位置
2. 用户将鼠标悬停在节点上 -> 显示新位置的指示符，该位置通过 redux 操作调度。 （整个树是应用程序状态的一部分）。
3. 用户结束拖动，该拖动调度一个动作，该动作在服务器上保持节点的新位置并将其传输到所有连接的套接字客户端。

目前，我们使用一些数学（此 repo 中可排序示例的变体）来计算节点是否位于文件夹之上或之下/之上。 最初我尝试将Folder组件设为DropTarget但这没有用，因为我无法对其他Node DropTarget进行排序

您关心哪些功能？

• 可测试性
• 切换后端
• 挂钩事件
• 浏览器支持

你能附上几张你的产品的截图吗？

看上面的视频

我上周刚刚将 react-dnd 添加到一个（尚未发布的）教育网络应用程序中。 太棒了！ 非常感谢你的工作！

IMO 最大的胜利是 react-dnd 为管理整个应用程序的 DnD 功能提供了正确的抽象级别。

除了能够抛弃孤立的、千篇一律的拖动组件（可排序等）的笨拙组合外，我还能够在几个小时内添加一些基于拖动的功能，我之前认为这些功能太复杂了值得（例如，拖动卡片以在其列表中重新排序，或拖到用户列表图标上以显示用户列表，然后将其放到适当的用户身上）。

到目前为止，我遇到的唯一问题是在触摸后端，但我能够快速破解以继续前进，有人评论说他们正在处理更一般的拉取请求。

鉴于已经很棒的 AP​​I，我关心的主要功能是可靠的触控支持。

就个人而言，为什么我不为开源项目提出拉取请求（到目前为止，无论如何）......我是一名设计师。 例如，虽然我使用了这个工具，但我的头脑自然而然地在思考非常不同类型的问题。 除了根本不擅长解决像这样的库中出现的问题之外，这真的不是我通常做的那种工作，我不会“相信”我的解决方案。 我知道这里有一些自私，但我想有不少设计师也碰巧在前端开发中编写代码，他们会这样做。 我非常感谢像你这样愿意用工具帮助像我这样的设计师的人，这些工具使应用程序开发的复杂性与产品设计的复杂性更加一致，从而在不同领域之间的移动不那么刺耳。

仅供参考，我将 react-dnd 与 react-flip-move 结合使用来动画布局更改。 这才几天，但他们似乎很配合。

@arstin

这让我很开心。 ：心：

_你在哪些产品中使用 React DnD？_
产品仍在保密中。

_你觉得它有多大用处？_
非常有用，我们有很多拖放类型。 将 DnD 逻辑保留在组件中有助于我们的大脑管理所有复杂性。

_你多久遇到一次问题，他们有多沮丧？_
由于我们注册的放置目标数量庞大，我们在性能方面存在一些问题。 否则效果很好！

_您关心哪些功能？_
性能和 SVG 兼容性。

你能附上几张你的产品的截图吗？
不是完整的，但这会让你了解我们试图用 React-DnD 解决的问题。

该应用程序的功能类似于战略游戏地图编辑器。 您可以根据一些规则将新项目拖放到地图上，也可以在地图上移动项目。 我们不是在构建在线游戏，而是使用一些想法来解决其他映射问题（同样，我还不能提及）。

非常非常感谢一个很棒的图书馆！

如果您正在使用 react 并且必须做 dnd 事情，这将是一个救命稻草。 做得好！

我在我们的运输管理软件中使用 React DND。 到目前为止，我完全没有问题。

用户拖动送货站，并在地图上直接看到他们计算出的距离。

你在哪些产品中使用 React DnD？

拖放式基于块的 CMS（又一个内部测试版，于 4 月为客户推出）

你觉得它有多大用处？

非常。 尽管 API 不像其他一些 3rd-party 组件那样_exactly_ 直接，但它超级强大，真的让您可以做任何您需要的事情。

你多久遇到一次问题，他们有多沮丧？

很少，也不是很令人沮丧。

您关心哪些功能？

稳定性和跨浏览器的防弹性。

你能附上几张你的产品的截图吗？

你在哪些产品中使用 React DnD？

我们在Asana Web 应用程序中使用 React DnD，用于我们使用拖放的所有地方。 请注意，我们目前正在将我们的应用程序从我们内部的 Luna 框架重写为 React，并且在我们使用拖放的所有地方都在重写期间使用 React DnD。

你觉得它有多大用处？

我们发现它非常有用。 该 API 易于使用，并允许我们通过将拖放包含在几个组件中来明确分离关注点。

你多久遇到一次问题，他们有多沮丧？

除了最初的加速之外，我们通常不会遇到问题。 我们将 React DnD 与 TypeScript 一起使用，我认为写出类型定义缩短了我们的启动时间（因为我们必须在此过程中探索整个 API）。 现在，我们的问题通常与测试有关（例如，测试之间的清理、使用 dnd 装饰的组件的内部助手等等）。 这有时令人沮丧，但现在我们有一些通用组件可供使用或示例组件作为未来组件的基础。

您关心哪些功能？

性能、关注点分离、可测试性

你能附上几张你的产品的截图吗？

@epelz您可能应该让asana赞助它，否则项目将会放慢速度

制作 def 使用 react-dnd 的 Trello 的https://github.com/Asana或https://github.com/FogCreek可能是很好的赞助商。

@gaearon最好让 Facebook 赞助它

你在哪些产品中使用 React DnD？

我们的下一代用户界面。

你觉得它有多大用处？

极其！ 我喜欢这些文档，但它可以使用更多真实世界的例子。

你多久遇到一次问题，他们有多沮丧？

刚刚在使用 DragSource 装饰组件时遇到了一个问题，这会阻止 componentWillUpdate 方法在 props 更改时执行。 超级令人沮丧，所以我想我应该提交一个错误。 我猜是我而不是你。 ;)

您关心哪些功能？

性能、稳定性和触控支持。

你能附上几张你的产品的截图吗？

恐怕还没有，但认为列表可以重新排序并将内容从新列表中拖入其中。 与此处的其他示例相比非常简单。

你在哪些产品中使用 React DnD？

我们@teleport在我们的Zen （移动清单）产品中使用 React DnD 对任务进行重新排序和分类。

此外，我们刚刚构建了一个可重用的树视图组件react-dnd-treeview ，它使用 React DnD 实现了 DnD 支持，用于当前内部项目。 我们一开始使用react-ui-tree但无法获得正确的用户体验，并且我们对 React DnD 有积极的体验，所以我们实现了自己的。 该组件处于非常早期的阶段，因此还没有文档、CI 等，但欢迎任何反馈！

你觉得它有多大用处？

虽然理解模型需要一些时间，但设计非常简洁，我们几乎决定在需要 DnD 的任何地方使用它。 所以，非常有用。

你多久遇到一次问题，他们有多沮丧？

到目前为止，我们遇到了 2 个问题：

• 通过触摸后端（包括性能）获得正确的拖动 UX
• 最初我尝试在 JS 中实现放置区域逻辑，但由于无法从 React DnD 中获得正确的目标相对坐标（用于确定是在目标上方还是下方），最终决定创建单独的覆盖 DOM 元素作为掉落目标。

您关心哪些功能？

性能，隐藏底层浏览器/平台的怪癖。

你能附上几张你的产品的截图吗？

传送禅：

反应-dnd-treeview：

你在哪些产品中使用 React DnD？
Discord - https://discordapp.com - 游戏玩家的语音和文字聊天

你觉得它有多大用处？
非常！

你多久遇到一次问题，他们有多沮丧？
很少有 5/10 令人沮丧。

您关心哪些功能？
当前的所有功能。

我们几乎将 react-dnd 用于Slack桌面客户端，但不幸的是遇到了两个限制，最终成为破坏者：

1. 无法自定义拖动逻辑（即计算拖动状态的逻辑，例如进行拖动时）。
   
   
   
   • 响应从拖动状态注入的不断变化的道具，更改组件非常容易。 使用自定义 React 组件自定义拖动预览也相当简单。 但不幸的是，您附加到拖动操作的数据只能附加到并跟随光标。 这妨碍了我们目前使用侧边栏的用户体验，您可以在其中拖动团队图标以重新排序它们，并且这些拖动仅限于 y 轴。 使用 react-dnd，您可以轻松地将拖动预览约束到一个轴，但无法在拖动时约束附加到光标的数据。 这意味着，如果您将光标水平地从侧边栏移开，但光标仍垂直“超过”放置目标，react-dnd 根本不会让放置目标响应。 （请参阅下面的 GIF，了解我们目前没有 react-dnd 的行为👇）
     
     
   
   
2. 如果您在hover上执行操作，则使用自定义拖动层会阻止常规的 React 渲染循环。 因为如果你想要一个自定义拖动层，你必须创建一个额外的 React 组件，并且该拖动层通过改变其位置来响应来自 dnd 监视器的props更改，因此render()最终得到称为_很多_。 仅当您在拖动 DragSource 时计划在hover上重新渲染任何其他组件（很可能是其他放置目标）时，这才是一个问题。 我们设法通过异步更改hover上的状态并在悬停目标未更改时提前返回来缓解这种情况，但是在悬停时更改放置目标时仍然存在明显的延迟。

希望反馈对您有所帮助！ 当我考虑在 Slack 应用程序中使用 react-dnd 时，我确实很喜欢使用它，如果可能的话，我很乐意看到它克服这些限制。

你在哪些产品中使用 React DnD？

我们在tylio中使用它，这是一种创建网页的新方法。 React-dnd 位于您上传内容的页面的前面和中心。

你觉得它有多大用处？

很有用; 一开始有点难以理解它，因为您需要一次了解所有移动部件，但一旦点击，您就可以开始了。

你多久遇到一次问题，他们有多沮丧？

我们的案例非常复杂，因为我们正在重新排序和移动不同尺寸的物品，并且我们不希望它们翻转过来。 我遇到了一些问题，但我想更多的是如何使用它而不是库本身。

您关心哪些功能？

几乎所有人！ 我们使用不同类型的拖动源和放置目标、原生文件/url/文本、HTML5 和带有自定义拖动层的触摸后端。

你能附上几张你的产品的截图吗？

如果有人将它与 Typescript 一起使用，您能否提供一个基本示例？ 我坚持这个错误：

decorateHandler.js:13 Uncaught TypeError: Cannot call a class as a function

我以这种方式使用它：

@DragSource(ItemTypes.IDEA,ideaSource,(connect:DragSourceConnector, monitor: DragSourceMonitor)=>{ return { connectDragSource:connect.dragSource(), isDragging:monitor.isDragging() }; })(Idea) export class Idea extends React.Component<IIdeaProps,{}>{...}

我不知道现在加入是否为时已晚，但我想提供一些（希望是建设性的）反馈。

我发现 React-DnD 有点难以掌握（和实施）。 它有许多活动部件，设置非常复杂。 我希望有一些更“即插即用”的东西。 也许这是因为它试图做许多不同的事情（拖放目标、列表重新排序等）。 但我最终采取了一种不同的方法，基本上只是在每个项目上放置上/下按钮并以这种方式重新排序，并结合react-flip-move来为运动设置动画。

我很想看到一个只专注于列表重新排序的分支，并让它_超级_简单地让它工作。

我们开始在使用 React 和 Redux 构建的大型专有产品上使用它。 我们使用 react-dnd 来管理应用程序中除 SVG 元素之外的所有事物的拖放方面。 它有恰到好处的抽象层。 事实上，我们内部有一些非常相似的代码，早于 React 并且它由鼠标事件支持。

我希望 react-dnd 拥有的一件事是基于鼠标事件的后端，因此它也适用于 SVG 元素。

顺便说一句，我正在根据其 TypeScript 定义为其编写流类型定义，因为流类型的现有定义是不完整的。

哇，大量的输入！ 这是要处理的大量数据！ 我要结束这个问题了。 感谢大家抽出宝贵时间提交意见！

我计划在接下来的几周内更新一些文档，我的一个想法是为使用 React DND 的项目和应用程序创建一个展示。 当我开始着手他的项目时，我将创建一个后续问题来捕获这些项目！

💜

@mnquintana非常有趣的反馈——你和团队最终是使用另一个拖放库还是完全从头开始构建一些东西？

@mnquintana知道你做了什么来克服这个真的很棒，或者更好的是，松弛地发布他们的 dnd 库！

@epelz需要你的帮助。 您是否创建了可重复使用的拖放组件来拖动仪表板中的卡片和列表中的项目，或者为卡片和列表使用单独的组件。 如果您能回复，我将不胜感激。

我知道这是一个非常古老的讨论线程，但无论如何都想做出贡献。 印象笔记
🐘 现在将 react-dnd 用于我们新的商业空间产品！ 我们学到了很多东西，如果人们有兴趣，我们可能会尝试分享我们学到的东西:)

你在哪些产品中使用 React DnD？
https://evernote.com/business

你觉得它有多大用处？
很有用！ 这是一个陡峭的学习曲线，但我们让它完成了大部分我们想做的事情。

你多久遇到一次问题，他们有多沮丧？
我觉得初学者有一些很大的障碍，有些事情处理起来很有趣。 一些关于悬停和拖放效果的错误让我们非常困惑，但仔细研究，其中一些似乎只是 HTML5 的拖放原生实现的限制（特别是拖放效果似乎覆盖了您想要应用的光标，所以我们可以'不要利用诸如cursor: no-drop之类的东西。你做的真的很聪明，所以你可以在必要时实现自己的后端，我们还没有冒险尝试触摸后端。

我们确实有一段有趣的时间与权限挂钩。 我们的笔记拖放需要很多东西才能知道我们是否可以移动和/或放下一些东西。 我们还发现，当我们在 CustomDragLayer 中找不到放置我们自己的位置时，我们必须重新实现原生的淡出拖回到主 DOM 元素（这可能是我们可以贡献的一个示例）。

您关心哪些功能？
我们正在寻求实现多个拖放，但据我们所知，使用 React-Dnd 似乎没有一种干净的方法来实现它？ 不过，我们正在对其进行更多研究。 当我们深入研究时，我们会分享更多。

@augbog不确定您是否尝试过，但您是否在第 14 期的第一篇文章中查看了 gaeron 的实现并使用了自定义拖动层？

在某种程度上，这种情况已经成为可能：消费者可以手动跟踪选定的元素，将 dragPreview 设置为某种通用占位符 Image 并对（就业务逻辑而言）几个元素的删除做出适当的反应。

https://react-dnd.github.io/react-dnd/examples-drag-around-custom-drag-layer.html

谢谢@JM-Mendez，是的，我们看到了，我们担心关于让多个组件意识到它们被拖动的后续评论，但在重读之后，它实际上可能不会影响我们，所以我们仍在调查它:) 谢谢呼吁！

仍然没有跨 iframe DnD 或父窗口到子 iframe 可拖动性的后端。 @gaearon我在几个线程上看到了您对这个问题的评论，我想说这是我必须为我的项目使用纯 js 解决方案的唯一原因。

（编辑）我认为这对于任何尝试构建拖放页面构建器的人来说都是一个非常有用的功能。