简介
React Sortable HOC 是一个 React 高阶组件（HOC），它使得拖拽排序非常简单和灵活。它允许您轻松地创建可排序的 React 列表，只需添加几个 props 就可以了。
在本教程中，我们将讲解如何使用 @procensus/react-sortable-hoc 包来创建一个 React 组件，实现列表拖拽排序的功能。该 npm 包依赖于 React，因此您需要确保 React 已经安装。
安装
使用 npm 命令安装 @procensus/react-sortable-hoc。
npm install @procensus/react-sortable-hoc
使用
将 SortableContainer、SortableElement 和 SortableHandle 导入您的React组件中，对需要进行拖动排序的元素进行封装即可。其中，SortableContainer 容器包含需要进行排序的所有项， SortableElement 是包含单个元素的可排序列表。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------------ --------------- - ---- -------------------------------- ----- ------------ - ------------------ ----- -- -- ------------------ ----- ------------ - -------------------- ----- -- -- - ------ - ---- ------------------ ------ -- - ------------- --------------------- ------------- ------------- -- --- ----- -- --- ----- ----------------- ------- --------------- - ----- - - ------ ------ --- ----- --- ----- --- ----- --- ----- ---- -- --------- - -- --------- -------- -- -- - ---------------- ----- -- -- -- ------ ---------------- --------- ---------- ---- -- -------- - ------ ------------- ------------------------ -------------------------- --- - -展开代码
在上面的代码中，我们封装了 SortableItem 和 SortableList 组件，以实现对列表元素的排序。然后，我们在 SortableComponent 组件中使用 SortableList 组件来展示需要进行拖动排序的所有项。
配置
您可以通过传递不同的 props 来对 SortableContainer 和 SortableElement 进行配置。
SortableContainer
axis{string}: 接受 'x' 或 'y'。默认值为 'y'。指定修复给定轴的滚动。distance{number}: 默认值为 0。定义当鼠标点击时需要偏移的距离，以防止不小心拖放。getContainer{function}: 这返回一个 HTML 节点元素，以将拖动元素定位到不同的容器中。helperClass{string}: 指定拖动元素的 css 类名。helperContainer{node} | {function}: 这返回一个 HTML 节点元素，以包装拖动元素的实际 DOM（Document Object Model）结构。hideSortableGhost{bool}: 指定是否隐藏拖动元素的幽灵，并代替原始元素。keyCodes{Object}: 默认设置为 {left: 37, right: 39, up: 38, down: 40}。可以手动重新定义所需的键码。lockAxis{string}: 接受 'x' 或 'y'。默认值为 null。锁定特定轴的拖动，禁用其他轴。lockOffset{string | array}: 创造一个边界，代表容器显式开头的像素。lockToContainerEdges{bool}: 将轴锁定为容器的边缘。transitionDuration{number}: 改变容器中属性的动画持续时间。
SortableElement
index{number}: 必要的数值类型 确定此元素的位置。disabled{bool}: 禁止对该组件进行排序。collection{any}: 确定元素所属的集合。每个集合都可以单独排序。
总结
在本文中，我们了解了如何使用 @procensus/react-sortable-hoc 包来创建一个 React 组件，在不使用太多代码的情况下，实现了列表拖动排序的功能，这是一个非常有用的技术实现。快来试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057b1f81e8991b448eb7d3
