简介
@cusxio/react-sortable-hoc 是一个方便的 React 拖拽排序组件库。它提供了灵活的 API 和简单的使用方法，使开发人员可以快速地实现拖拽排序功能。本篇文章将介绍 @cusxio/react-sortable-hoc 的基本用法，并通过示例代码进一步说明。
安装
@cusxio/react-sortable-hoc 是一个 npm 包，可以通过以下命令进行安装：
npm install @cusxio/react-sortable-hoc --save
基本用法
使用 @cusxio/react-sortable-hoc 实现拖拽排序功能的步骤如下：
- 导入 SortableContainer 和 SortableElement 组件。
import { SortableContainer, SortableElement } from '@cusxio/react-sortable-hoc';- 使用 SortableElement 将每个拖拽项包装起来。
const SortableItem = SortableElement(({ value }) => <div>{value}</div>);- 使用 SortableContainer 将所有拖拽项包装起来，并在其中使用 SortableItem。
-- -------------------- ---- -------
----- ------------ - -------------------- ----- -- -- -
------ -
-----
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
------
--
---其中，items 是需要排序的数组数据。利用 map 函数，先将数组中的每个元素转化成 SortableItem 组件，最后全部传递给 SortableContainer。
- 渲染 SortableList 组件。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----- - -
------ ------ --- ----- --- ----- --- ----- --- ----- ----
--
--------- - -- --------- -------- -- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
--
-------- -
----- - ----- - - -----------
------ ------------- ------------- -------------------------- ---
-
-在上例中，我们可以看到 state 中存储了需要排序的数组 items。同时在 SortableList 组件中，通过 onSortEnd 方法来触发排序后的回调函数，将排序后的结果更新至 state 中。
高级用法
@cusxio/react-sortable-hoc 还为我们提供了一些高级配置。如果需要更加详细的文档，请访问官方文档。
拖拽限制
@cusxio/react-sortable-hoc 可以通过禁止或限制某些拖拽项的拖拽行为，以满足一些定制化的需求。
-- -------------------- ---- -------
----- ------------ - -------------------- ----- -- -- -
------ -
-----
------------------ ------ -- -
------------- ------------------------ --------------------- ------------- ------------- --
---
------
--
---上例中，SortableItem 组件增加了一个 disabled 属性，可以在数据源中灵活地加入。当 disabled 为 true 时，拖拽事件将被禁用。
自定义拖拽样式
@cusxio/react-sortable-hoc 允许我们自定义拖拽样式，以满足更加细致的需求。
-- -------------------- ---- -------
----- ------------ - ------------------ ----- -- -- -
---- -------- ----------- -------- -------- ------- ------- ------ ------- ---- ----- ------ ----------------
---
----- ------------ - -------------------- ----- -- -- -
------ -
---- -------- ------ ----- ---
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
------
--
---在上例中，我们通过修改 SortableItem 组件的样式，使其更像是一个可拖拽的容器。
指定拖拽排序对象
有时候，我们并不希望所有的子组件都可以进行拖拽排序。@cusxio/react-sortable-hoc 也为我们提供了可定制化的拖拽排序对象。
-- -------------------- ---- -------
----- ------------ - ------------------ ----- -- -- -
---- ---------------------------------------------
---
----- ------------ - -------------------- ------ --------- -- -- -
----- ------------- - ------------------- -- ------------- --- ------
------ -
---- -------- ------ ----- ---
-------------------------- ------ -- -
------------- --------------------- ------------- ------------- --
---
------
--
---在上例中，我们使用了子组件的 class 属性来判断该组件是否应该参与拖拽排序。filteredItems 包含了所有 dragOnly 为 true 的数据源，同时最终只有这些组件会参与拖拽排序。
示例代码
最后，我们提供一个示例代码供大家参考。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------------ --------------- - ---- -----------------------------
------ ------------
----- ------------ - ------------------ ----- -- -- -
---- -------- ----------- -------- -------- ------- ------- ------ ------- ---- ----- ------ ----------------
---
----- ------------ - -------------------- ----- -- -- -
------ -
---- -------- ------ ----- ---
------------------ ------ -- -
------------- --------------------- ------------- ------------- --
---
------
--
---
----- --- ------- --------- -
----- - -
------ ------ --- ----- --- ----- --- ----- --- ----- ----
--
--------- - -- --------- -------- -- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
--
-------- -
----- - ----- - - -----------
------ ------------- ------------- -------------------------- ---
-
-
-------- ---------------- --------- --------- -
-- --------- -- ------------- -
--- - - -------- - -------------
----- ---- - -- -
----------------------
-
-
---------------------- -- ---------------------- -------
------ ------
-
------ ------- ----总结
@cusxio/react-sortable-hoc 是一个方便的 React 拖拽排序组件库，可以快速实现拖拽排序功能。本文通过详细的介绍和示例代码，希望能够帮助大家更好地掌握这个库的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b381e8991b448def68