前端开发中常常需要使用拖拽排序的功能，我们可以利用现成的 npm 包来实现这一功能。inferno-dnd-sorter 就是一个非常好用的拖拽排序 npm 包，它基于 Inferno 实现，提供了丰富的 API，可以满足拖拽排序功能的需求。
本文将详细介绍 inferno-dnd-sorter 的使用方法，并给出示例代码和使用指导，希望能帮助前端工程师快速实现基于拖拽的排序功能。
安装 inferno-dnd-sorter
首先，我们需要在项目中安装 inferno-dnd-sorter，可以通过以下命令进行安装：
npm install inferno-dnd-sorter
使用 inferno-dnd-sorter
安装完成后，我们需要在代码中引用 inferno-dnd-sorter 中的模块:
import { SortableContainer, SortableElement } from 'inferno-dnd-sorter';其中，SortableContainer 和 SortableElement 分别代表容器和子元素，我们可以通过它们来实现拖拽排序的功能。
SortableContainer
首先，我们来看一个 SortableContainer 的使用示例：
-- -------------------- ---- -------
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- ------------------------ ------------- ------------- --
---
-----
--
---上述代码中，我们定义了一个 SortableList 组件，并通过 SortableContainer 函数包装它，将其转化为一个支持拖拽排序的容器。
在 SortableList 组件中，我们通过 items 数组渲染列表，每个列表项都对应一个 SortableItem 组件。在 SortableItem 组件中，我们通过传递 index 和 value 来定义每个列表项的位置和值。
SortableElement
接下来，让我们来看看如何使用 SortableElement：
const SortableItem = SortableElement(({ value }) => {
return <li>{value.name}</li>;
});SortableItem 组件用于定义每个列表项的元素，其中 value 为传入的数据数组的值，可以在组件中进行渲染。
拖拽排序的实现
拖拽排序功能的实现需要我们定义一些回调函数，以便在拖拽过程中进行状态的更新和元素的交换。以下是一个拖拽排序的示例代码：
-- -------------------- ---- -------
--------- - -- --------- -------- -- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
--
-------- -
----- - ----- - - -----------
------ ------------- ------------- -------------------------- ---
-在以上代码中，我们定义了一个 onSortEnd 回调函数，通过期望得到的新位置和原有的位置来更新列表项的状态。另外，在 SortableList 组件中，我们将 onSortEnd 作为 props 传递给了组件，以便在拖拽过程中可以进行状态的更新。
示例代码
index.js
-- -------------------- ---- -------
------ - ------ - ---- ----------
------ - ------------------ --------------- - ---- ---------------------
------ --------- ---- -------------
----- ----- - -
- --- -- ----- ------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- -------- --
- --- -- ----- ------------ --
--
----- ------------ - -------------------- ----- -- -- -
------ -
----
------------------ ------ -- -
------------- ------------------------ ------------- ------------- --
---
-----
--
---
----- ------------ - ------------------ ----- -- -- -
------ ----------------------
---
----- --- ------- --------- -
----- - -
------
--
--------- - -- --------- -------- -- -- -
---------------- ----- -- -- --
------ ---------------- --------- ----------
----
--
-------- -
----- - ----- - - -----------
------ ------------- ------------- -------------------------- ---
-
-
----------- --- ---------------------------------index.html
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------------------- ------------ ------- ------------------------------------------------------- ------- -------------------------------------------------------------- ------- ------------------------------------------------------------------ ------- ------ ---- ---------------- ------- -------------------------- ------- -------
总结
inferno-dnd-sorter 是一个非常好用的拖拽排序 npm 包，可以在前端开发中大幅提高开发效率。本文介绍了 inferno-dnd-sorter 的使用方法，并给出了详细的示例代码和使用指导，希望能够帮助前端工程师在实现拖拽排序功能时更加便捷快速。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580581e8991b448d5294