介绍
react-dnd-touch-backend是一个 npm 包，它提供了一种使你的 React DnD 应用程序可用于移动设备的后端。它使用原生支持 touch 事件的浏览器而不是使用模拟鼠标活动来模拟他们。
准备工作
为了在项目中使用 react-dnd-touch-backend 包，您需要确保项目中已经安装了以下包：
"react": "^16.0.0""react-dnd": "^2.0.0""react-dnd-touch-backend": "^0.7.0"
如果这三个包没有安装或版本不对，你需要运行以下命令来安装或更新他们:
npm install react react-dnd react-dnd-touch-backend --save
安装 react-dnd-touch-backend
在项目中安装 react-dnd-touch-backend 后，你需要做的是将其作为后端传递给你的 DnD 组件。代码样例如下：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -------- ---- ------------
------ - ------------ ---------- - ---- ------------
------ - ------------ - ---- --------------------------
----- --- - -- ---- -- -- -
----- -- ----- - ---------
----- - ----- ----- ----- --
---- ------ -------- -- -
----- ---------- - ------------------------
-- ----- -- ----------- -
---------------- ------- ------------ ---- ----------------------
-
--
---
------ -
---- ---------- -------- ------ -------- ------- -------- ---------------- ----- ---
---- ---
------
--
--
----- --- ------- --------- -
-------- -
------ -
------------ ---------------------- ---------- ------------------ ---- ---
---- ---------- --
--------------
--
-
-
-------------------- --- ---------------------------------注意在 TouchBackend 的设置中需要添加 options 属性，用于开启鼠标事件的支持。这可以在你进行本地开发时方便测试。
效果
当你在移动设备上通过手指拖拽 Box 时，你会看到它的位置随着你滑动而移动。
总结
本篇文章介绍了 npm 包 react-dnd-touch-backend 的使用方法，它使你的 React DnD 应用程序可在移动设备上使用。学习了本文之后，你可以快速的在你的项目中使用它，进而开发出更好的应用。
最后
以下是完整的示例代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ -------- ---- ------------
------ - ------------ ---------- - ---- ------------
------ - ------------ - ---- --------------------------
----- --- - -- ---- -- -- -
----- -- ----- - ---------
----- - ----- ----- ----- --
---- ------ -------- -- -
----- ---------- - ------------------------
-- ----- -- ----------- -
---------------- ------- ------------ ---- ----------------------
-
--
---
------ -
---- ---------- -------- ------ -------- ------- -------- ---------------- ----- ---
---- ---
------
--
--
----- --- ------- --------- -
-------- -
------ -
------------ ---------------------- ---------- ------------------ ---- ---
---- ---------- --
--------------
--
-
-
-------------------- --- ---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-dnd-touch-backend