在前端开发中，拖放(Drag-and-Drop)是一个非常常见的交互行为。而DnD API是浏览器原生支持的，在React开发中，我们可以使用React DnD库来方便地实现拖放。不过，React DnD目前在移动端的支持不够完善，特别是对于触摸屏的支持还比较薄弱。
近期发现npm包@joaomosmann/react-dnd-touch-backend支持移动端的拖放，本文将介绍如何使用该npm包实现移动端拖放。
安装
在终端中运行以下命令：
--- ------- ------ ------------------------------------
用法
在React组件中引入与设置：
------ ----- ---- -------
------ - ----------- - ---- -----------
------ - ------------ - ---- --------------------------------------
----- ------------- - -- -- -
------ -
------------ -----------------------
--- ---- ---
--------------
-
-
------ ------- -------------通过引入DndProvider和TouchBackend，我们为项目启用了移动端拖放。
使用TouchBackend参数
TouchBackend需要传入一些配置参数：
enableMouseEvents: 当设置为true时，可以在移动设备的浏览器中模拟鼠标事件。默认是false。delayTouchStart: 滑动开始前延迟的毫秒数。默认是100毫秒。delayMouseStart: 拖拽对象被移动时延迟的毫秒数。默认是0毫秒。delayTouchHold: 长按持续时间。默认是500毫秒。scrollableAncestor: 滚动条父元素。默认是文档元素。ignoreContextMenu: 是否忽略右键单击事件。默认是true。enableKeyboardEvents: 是否启用键盘事件。默认是false。touchSlop: 触摸偏移量。默认是10像素。
例如：
------------- ------------------------ --------------------- -------------------- --
已知问题
目前React DnD在移动端的实现还有很多的问题，例如无法支持组合拖放等。这个npm包也有自己的问题。
当设置了delayTouchHold参数时，用户拖拽会生成一个占位符，当占位符移动过程中拖拽解除时，占位符可能会停留在原地，需要在占位符上添加onDragEnd事件，把占位符位置重置为初始位置，解决上述问题。示例如下：
------ ------ - -------- - ---- -------
------ - -------- ------- - ---- -----------
----- ---------------------- - -- -- -- -- -
----- -- ---------- -- ----- - ---------
----- - --- ----- --------------------- --
-------- --------- -- -- ----------- -------------------- --
--
----- -- ----- - ---------
------- ----------------------
------ -- -- -
-- -- ---------
-
--
----- ------- --------- - ------------
----- --------- - -- -- -
------------
-
------ -
---- ---------- --------------
-------------
------
-
-
------ ------- ----------------------在上述代码示例中，我们在div上添加了ref={drag}，以使用useDrag方法向组件添加拖拽功能。
通过使用useDrop方法，将拖拽元素的接受类型设置为YOUR_DRAGGABLE_TYPE。
我们在组件中添加onDragEnd事件，以实现拖动结束后的处理。在事件中，我们通过调用setStyle({})方法将原占位符重置为初始位置。
结语
本文介绍了npm包@joaomosmann/react-dnd-touch-backend，该npm包可以方便地在React DnD中实现移动端拖放功能。对于移动端拖放的支持，React DnD还有很多问题需要解决，这也是我们需要深入探讨的地方。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601281e8991b448de114