前言
在前端开发中，我们经常需要对一组数据进行排序，而在实现拖拽排序时，我们不得不处理很多样式、鼠标移动事件等细节问题。这时，npm 包 @interal/react-sortable-hoc 就能够大大地帮助我们简化这个过程，方便快捷地实现拖拽排序功能。本文将详细介绍如何使用这个 npm 包。
安装
在项目中使用 npm 或 yarn 进行安装：
npm install @interal/react-sortable-hoc
或
yarn add @interal/react-sortable-hoc
基本使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------------ --------------- - ---- ------------------------------
----- ------------ - ------------------ ----- -- -- --------------------
----- ------------ - -------------------- ----- -- -- -
------ -
-----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
------
--
---
----- --- ------- --------- -
----- - -
------ ------ --- ----- --- ----- --- ----- --- ----- ----
--
--------- - -- --------- -------- -- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
--
-------- -
----- - ----- - - -----------
------ -
-----
------------ ---------
------------- ------------- -------------------------- --
------
--
-
-
-------- ---------------- --------- --------- -
-- --------- -- ------------- -
--- - - -------- - ------------ - --
----- ----- -
----------------------
-
-
---------------------- -- ---------------------- -------
------ ------
-
------ ------- ----上面的代码实现了一个可拖拽排序的列表。SortableContainer 和 SortableElement 两个组件就是核心的拖拽排序组件，在 SortableList 组件中使用 SortableElement 以及在 SortableItem 组件中指定 index 和 key 属性，就可以将列表项进行拖拽排序。
需要注意的是，在 onSortEnd 方法中，我们需要使用 arrayMove 函数来移动元素。这个函数可以用来数组中移动元素的位置。
高级使用
Helper class
Helper class 用于定义拖拽过程中的 item 的样式和外观。有三个属性：className、style 和 innerHTML。
<SortableList helperClass="helper-class" />
Helper class 可以通过 helperClass 属性指定，如上例子中的 "helper-class"。这个类（"helper-class"）将被添加到拖拽期间渲染的元素上。
Axis
Axis 属性指定了拖拽的方向。默认是垂直方向。
<SortableList axis="x" />
现在，只能在水平方向上进行拖拽。
TransitionDuration
TransitionDuration 属性指定动画的过渡时间（单位是毫秒）。默认值为 450ms。
<SortableList transitionDuration={500} />Distance
Distance 属性指定鼠标拖拽起始位置到实际拖拽位置的距离（单位是像素）。默认值为 5px。
<SortableList distance={10} />LockAxis
LockAxis 属性可以锁定拖拽的方向。
<SortableList lockAxis="y" />
现在，只能在垂直方向上进行拖拽。
总结
@interal/react-sortable-hoc 这个 npm 包可以帮助我们省略拖拽排序中繁琐的样式和事件处理逻辑，使我们更加专注于数据排序处理的逻辑。使用此 npm 包可以更加方便快捷地实现拖拽排序功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb181e8991b448dc4ef