react.js 的触摸支持拖放

Posted 2023-05-08

【中文标题】react.js 的触摸支持拖放

【英文标题】：Drag and drop with touch support for react.js

【发布时间】：2015-03-06 09:54:18

【问题描述】：

如何实现支持触摸事件的 Facebook 的 react.js 拖放？

有几个 questions 和 articles 和 libraries 关于 react.js 的拖放，但似乎没有一个提到触摸事件，也没有一个演示在我的手机上工作。

总的来说，我想知道什么是最简单的：尝试使用已经支持触摸的现有 d&d 库来实现这一点，但可能需要一些工作才能与 react 一起正常工作。或者尝试使用任何 react d&d 示例并使它们与触摸一起工作（看到this issue，这可能不是微不足道的？）

【问题讨论】：

你在 React 中有 enabled touch events 吗？

【参考方案1】：

react-motion（带有触摸事件）

我们已经尝试使用“react-motion”来拖动列表中的项目。超过 15 到 20 个项目，它变得非常滞后。 （但使用小列表效果很好，就像在这个demo 中一样）。请注意，移动设备比台式机慢得多。

关于 react-motion 的重要说明：在测试动画性能时不要忘记使用生产模式！

react-dnd（带有触摸事件）

第二个选项是“react-dnd”。这是一个很棒的图书馆。它是低级别的，但是，很容易理解如何使用它。但起初，“react-dnd”对我们来说不是一个选项，因为不支持触摸事件。

后来，当雅虎发布 react-dnd-touch-backend 时，我们决定将我们的应用从“react-motion”切换到“react-dnd”。这解决了我们所有的性能问题。我们列出了 50-70 个项目，它按预期工作。

Yahoo 做得非常好，该解决方案适用于我们的生产应用程序。

【讨论】：

我根本无法让它与 React + ES6 一起使用。我让它渲染，但与元素的任何交互都不会更新样式属性以使其有用。 :[

适合我的案例的完美库

@BradGunn 我不确定您的案例是否与 ES6 有关。使用 React ES6 类语法的唯一问题是自动绑定。如果它引用正确的对象，请检查“this”

react-dnd-touch-backend 似乎不再受到大力支持。 github.com/atlassian/react-beautiful-dnd 可能需要考虑支持触摸，尤其是在使用列表时。

【参考方案2】：

你已经提到了react-dnd，我让PR 为触摸设备启用了 dnd，所以你可以尝试一下

【讨论】：

是的，touchbackend 现在可以工作，并且已经集成到项目中并在网站上提到。我注意到的一件事是，当我使用触摸后端时，鼠标拖放在我支持鼠标和触摸的笔记本电脑上不再起作用。

@Flion 有一个设置可以传递给 TouchBackend 以启用鼠标事件。