在前端开发中，我们常常需要对列表或者表格中的内容进行排序或者拖拽操作。而基于 React 实现的拖拽排序的组件库 @tmc/react-sortable-hoc 就能够很好地解决这个问题。本文将详细介绍它的使用方法，并附上示例代码帮助快速入门。
什么是 @tmc/react-sortable-hoc
@tmc/react-sortable-hoc 是一个基于 React 实现的拖拽排序组件库，可以方便地为列表、表格等组件增加排序、拖拽功能。它包含多种排序算法和触发方式，比如点击、拖拽等，还能够支持多个层级嵌套和拖拽卡片样式自定义等功能。
安装和使用
首先，我们需要在项目中安装 @tmc/react-sortable-hoc。可以通过 npm 或者 yarn 进行安装：
# 使用 npm npm install @tmc/react-sortable-hoc --save # 使用 yarn yarn add @tmc/react-sortable-hoc
安装完成后，我们就可以开始使用 @tmc/react-sortable-hoc 了。以下示例代码是一个简单的列表组件，其中每个元素都可以进行拖拽排序：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------------ --------------- - ---- --------------------------
----- ------------ - ------------------------- -- -
----------------
---
----- ------------ - --------------------------- -- -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
---
----- ------ ------- --------- -
----- - -
------ ------ --- ----- --- ----- --- ----- --- ----- ----
--
--------- - -- --------- -------- -- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
--
-------- -
----- - ----- - - -----------
------ ------------- ------------- -------------------------- ---
-
-
------ ------- -------在上面的代码中，我们使用了 sortableContainer 和 sortableElement 这两个函数来创建可排序的列表。其中，sortableContainer 用来包裹整个列表，sortableElement 则用来定义列表中每个元素。我们还需要定义 onSortEnd 回调函数来处理排序结束事件。在本例中，我们使用了 arrayMove 这个函数来实现数组元素的移动，它是一个辅助函数，具体实现如下：
-- -------------------- ---- -------
-------- ---------------- --------- --------- -
-- --------- -- ------------- -
--- - - -------- - ------------ - --
----- ----- -
----------------------
-
-
---------------------- -- ---------------------- -------
------ ------
-针对不同需求的配置
@tmc/react-sortable-hoc 还支持多种排序算法和触发方式，并且提供了许多配置选项，可以根据实际需求进行配置。以下是一些常用的配置选项的详细介绍：
axis
axis 选项可以控制排序的方向。当设置为 'x' 时，表示只能水平排序，当设置为 'y' 时，表示只能垂直排序，默认为不限制。
以下是一个水平排序的示例：
-- -------------------- ---- -------
----- ------------ - --------------------------- -- -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
-- -
----- ----
---distance
distance 选项可以控制触发拖拽事件的最小距离，默认为 0，即需要拖拽的卡片完全脱离原位置才会触发拖拽事件。如果设置为一个大于 0 的数值，那么只需要拖动鼠标、触摸屏幕的距离超过这个数值就可以触发拖拽事件。
以下是一个触发距离为 10px 的示例：
-- -------------------- ---- -------
----- ------------ - --------------------------- -- -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
-- -
--------- ---
---pressDelay
pressDelay 选项可以控制按下鼠标、触摸屏幕后，拖拽事件触发的延迟时间，默认为 0。如果设置了一个大于 0 的值，那么只有按下时间超过这个时间才会触发拖拽事件。这个参数可以防止误触导致拖拽事件触发。
以下是一个按下延迟为 500ms 的示例：
-- -------------------- ---- -------
----- ------------ - --------------------------- -- -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
-- -
----------- ----
---handle
handle 选项可以限制哪个元素可以触发拖拽事件。如果不设置该选项，那么整个拖拽元素都将触发拖拽事件；如果设置了该选项，则只有该选项指定的元素可以触发拖拽事件。
以下是一个限制拖拽元素只能通过按钮触发的示例：
-- -------------------- ---- -------
----- ------------ - ------------------------- -- -
----
------------ -----------
-------
-----
---
----- ------------ - --------------------------- -- -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
-- -
------- ---------
---总结
@tmc/react-sortable-hoc 是一个方便实用的拖拽排序组件库，可以轻松地增加列表、表格等组件的排序、拖拽功能。在本文中，我们详细介绍了它的使用方法，并且针对不同需求提供了配置选项的解释和示例代码。希望读者们能够在实际开发中成功应用这个组件库，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382258d