介绍
@mcro/react-sortable-hoc 是一个将元素排序的 React 组件，实现了拖动和排序的功能。
安装
在安装之前，必须先安装 Node.js 和 npm。然后打开终端或命令行窗口，在项目目录中执行以下命令：
npm install @mcro/react-sortable-hoc
使用
使用 @mcro/react-sortable-hoc 可以非常简单地实现拖动排序功能。
-- -------------------- ---- -------
------ -------- ---- ---------------------------
----- ------------ - ------------------ -- -
------ -
----
------------------ ------ -- -
--- ------------------------
---
-----
--
---
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
------ ------ --- ----- --- ----- --- ----- --- ----- ----
--
-------------- - --------------------------
-
-------------------- ---------- -
----------------------- -- --
------ ---------------- --------- ----------
----
-
-------- -
------ ------------- ------------------------ -------------------------- ---
-
-Props
axis
确定排序时应沿哪个轴拖动元素。可以是 x，y 或者 xy（默认值）。
<SortableList items={items} axis="x" />distance
拖动对象离鼠标的距离，默认为 1px。
<SortableList items={items} distance={10} />lockAxis
锁定某个轴。默认为 ''。
<SortableList items={items} lockAxis="x" />helperClass
拖动过程中 helper 的 class。
<SortableList items={items} helperClass="helper-class" />animateOpacity
是否在拖动过程中使用 CSS 动画来控制元素的透明度。默认为 true。
<SortableList items={items} animateOpacity={false} />useDragHandle
若使用，拖动元素只能在拖动柄上操作。
<SortableList items={items} useDragHandle={true} />onSortStart
当一个元素开始被拖动时触发。回调有两个参数，event 和 an object with a sortIndex 属性，它是即将被排序的元素的索引。
<SortableList items={items} onSortStart={handleSortStart} />onSortEnd
当元素排序完成并放置在新位置时触发。回调有两个参数，event 和 an object with two fields：oldIndex 和 newIndex，分别表示元素的旧索引和新索引。
<SortableList items={items} onSortEnd={handleSortEnd} />onSortMove
拖动元素在排序位置上发生移动时触发。返回值为布尔值，用于确定元素是否可以在拖动过程中更改其位置。
<SortableList items={items} onSortMove={handleSortMove} />useWindowAsScrollContainer
在拖动时将整个窗口视为滚动容器。
<SortableList items={items} useWindowAsScrollContainer={true} />hideSortableGhost
当应用程序在 iOS 上运行时，拖动元素还应在拖动后立即消失吗？（默认为 true）。
<SortableList items={items} hideSortableGhost={false} />示例代码
本文提供一个实例代码来帮助读者更好地理解 @mcro/react-sortable-hoc 的使用方法。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ---------------------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -
- --- -- ------ ----------- ---- --
- --- -- ------ ------ --
- --- -- ------ ----------- --
- --- -- ------ -------- --
- --- -- ------ -------- --
--
--
-------------- - --------------------------
-
----------- --------- -------- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
-
-------- -
------ -
-----
---------------
---------------------- ------------------------ -------------------------- --
------
--
-
-
----- --------------------- - ----------- ----- -- -- -
----
------------- --- ----- -- ------ -- -
--- ---------
------------
--------------
-----
---
-----
---
------ ------- ---------这个例子是一个待办事项列表，使用了 @mcro/react-sortable-hoc 实现了拖动排序功能。在 onSortEnd 方法中，调用了 arrayMove 方法，将排序结果更新到了 state 里。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d09270238226b5