React-dragula-hoc 是一个基于 React 和 Dragula 实现的可复用的拖拽组件，能够简单快速地实现拖拽功能，极大地提高了前端开发效率。
什么是 Dragula
Dragula 是一个轻量级的 JavaScript 库，封装了原生的 HTML5 拖拽 API，提供了更简单和可靠的拖拽操作，可以用于实现各种拖拽交互。
react-dragula-hoc 的优势
React-dragula-hoc 将 Dragula 封装成 React 的 Higher Order Component，通过传入被拖拽元素的 id 或 class 实现拖拽功能，不需要编写重复的拖拽操作代码。它的优势在于：
- 快速实现拖拽功能，减少代码量
- 支持多个可拖拽元素之间的互动
- 可以将拖拽状态进行简单的自定义
安装 react-dragula-hoc
使用 npm 安装 react-dragula-hoc：
npm install --save react-dragula-hoc
使用示例
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- --------------------
----- ----------- ------- --------- -
-------- -
------ -
-----
---- --------------------- ------------
---------------
-------------
-----------------
------
---- --------------------- -------------
---------------
-------------
-----------------
------
------
--
-
-
------ ------- -------------------- -
----------- --------- ---------
---在上面的示例中，我们使用 dragula hoc 对 DragulaDemo 进行了包装，并且传入了要进行拖拽的元素容器 containers 的 ref，dragula 就会自动将拖拽事件绑定在每个接受拖动元素的 container 上。
dragula hoc 参数
我们还可以对 dragula hoc 进行进一步的配置，下面是常用的 dragula hoc 参数：
rest，组件的 props，会被传入到组件中。options，Dragula 的选项，可以参考 Dragula 的文档来进行配置。containers，一个数组或者一个字符串，指定哪些 ref 引用的元素需要进行拖拽操作。bindEvents，一个布尔值，是控制 Dragula 是否自动进行事件绑定，我们可以手动来实现。
自定义
如果需要对拖拽状态进行自定义，可以使用 dragula hoc 来实现，例如下面的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- --------------------
----- ----------- ------- --------- -
----- - -
--------- -
- --- -- ----- ------ ------ --
- --- -- ----- ------------------- --
- --- -- ----- --- -------- -
-
-
-------- -
----- - -------- - - -----------
------ -
-----
--------------------- -- -
------ -
----
----------------
--------------------
-------------------
-
--------------
------
--
---
------
--
-
-
------ ------- -------------------- -
----------- --------------
-------- - -------------- ---- --
--------- -
-------- -------- ---- ------- -
------ -------------------------------------
--
----- -------- ---- ------- ------- -------- -
-- ------- --- ------- -
----- -- - ---------------------------
----- ------ - -------------------------------
--------------------- --- -------- --------
-
-
-
---在上面的示例中，我们手动创建了组件的 state 和渲染逻辑，它包含了一些拖拽项，每个拖拽项都有一个唯一的 id 和一个文本，这些消息是通过函数映射的方式来呈现的。接下来我们使用 dragula hoc 来包装 DragulaDemo 组件，并传入了我们需要的 options 和 listener，我们可以在 listener 中定义 accepts 和 drop 来进行拖拽状态的自定义。
总结
React-dragula-hoc 是一个非常实用的拖拽组件，可以通过很少的代码就实现拖拽操作。它的配置也非常灵活，可以通过修改选项和监听器对拖拽状态进行自定义。在实际开发中，我们可以参考官方文档进行更多的配置，来满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596381e8991b448d6da5