在前端开发中，实现拖拽功能是一项常见的需求。而使用 npm 包 @prometheusresearch/react-sortable-hoc 可以非常方便地实现拖拽排序功能，并且具有高度的可定制性。本文将详细介绍如何使用该 npm 包来实现拖拽排序功能。
安装
使用 npm 安装 @prometheusresearch/react-sortable-hoc：
npm install --save @prometheusresearch/react-sortable-hoc
基本使用
首先在组件中导入 SortableContainer 和 SortableElement：
import { SortableContainer, SortableElement } from '@prometheusresearch/react-sortable-hoc';然后使用 SortableContainer 和 SortableElement 包裹列表项组件：
-- -------------------- ---- -------
----- ------------ - ------------------ ----- -- -- ------------------
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
--
---其中 SortableList 接收一个 items 数组作为参数，SortbleItem 接收一个 value 和 index 作为参数。接着在组件中初始化 items 数组，并渲染 SortableList：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----- - -
------ ------ --- ----- --- ----- --- ----- --- ----- ----
--
--------- - -- --------- -------- -- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
--
-------- -
----- - ----- - - -----------
------ ------------- ------------- -------------------------- ---
-
-onSortEnd 是一个回调函数，用来处理拖拽结束后的操作。这里使用了第三方库 array-move，用于数组元素的移动操作。
进阶使用
可拖拽区域
默认情况下，整个列表项都是可拖拽的。如果需要设置自定义的可拖拽区域，可以使用 SortableHandle：
const DragHandle = SortableHandle(() => <span>::</span>);
const SortableItem = SortableElement(({ value }) => (
<li>
<DragHandle /> {value}
</li>
));排序动画
使用 SortableContainer 的属性 transitionDuration 可以设置排序动画的时长，单位为毫秒：
-- -------------------- ---- -------
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
--
-- - ------------------- --- ---拖拽占位符
默认情况下，拖拽时占位符是一个空白元素。使用 SortableContainer 的属性 helperClass，可以设置拖拽时占位符的样式：
-- -------------------- ---- -------
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
--
-- - ------------ ---------------- ---兄弟元素策略
使用 SortableContainer 的属性 shouldCancelStart 可以设置该拖拽不会被开始，例如在某个元素内部拖拽时可以禁用该元素拖拽功能：
-- -------------------- ---- -------
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
--
-- - ------------------ --- -- ------------------------------ --- ------- ---拖拽范围
使用 SortableContainer 的属性 pressDelay 可以设置拖拽范围，即从鼠标按下到开始拖拽的时间间隔，单位为毫秒：
-- -------------------- ---- -------
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
-----
--
-- - ----------- --- ---总结
本文介绍了如何使用 @prometheusresearch/react-sortable-hoc npm 包来实现拖拽排序功能，并且介绍了该包的高度可定制性。在实际开发中，根据具体需求，可以设置不同的属性来定制拖拽排序功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005517f81e8991b448ced12