简介
react-sortablejs-list 是一个基于 React 和 Sortablejs 的列表排序组件库。它可以让你轻松地创建可拖动的列表，同时具备可配置的排序功能。它遵循了现代前端开发的相关技术标准和原则，具有开源、易用、高效、稳定等特点。在前端开发中，它可以用于多个方面的应用，如：拖拽排序、任务管理、数据列表等。通过学习本文，你可以轻松掌握 react-sortablejs-list 的使用方法，并应用到实际的开发场景中。
安装
运行以下命令安装 react-sortablejs-list：
npm install react-sortablejs-list
基本使用
将 react-sortablejs-list 导入到你的 React 应用中：
import SortableList from 'react-sortablejs-list';
在你的组件的 render 方法中，使用 SortableList 并传入一个数组、组件名称和渲染函数：
<SortableList
items={[{label: 'Item 1'}, {label: 'Item 2'}, {label: 'Item 3'}]}
renderItem={({label}) => <div>{label}</div>}
/>现在你已经可以看到一个可拖动的列表，并且你可以将列表项按照你指定的顺序排序。
配置
react-sortablejs-list 可以在多个方面进行配置。以下是可用的选项列表：
items：一个数组，表示排序列表中的所有项目。renderer：用于呈现项目的渲染函数。默认情况下，它将返回项目的标签和键。您可以指定自定义渲染函数来呈现不同类型的项目。onChange：当列表项排序时调用的回调函数。containerProps：传递给容器 DOM 元素的属性。transitionDuration：用于动画的 CSS 过渡持续时间（单位为毫秒）。dragStartThreshold：拖动启动之前要移动的像素数。disable：禁用拖动和排序。ghostClass：拖动时产生的空白区域的类名。chosenClass：拖动时被选择的元素的类名。dragClass：拖动时元素的类名。
示例代码
以下是一个使用 react-sortablejs-list 的完整示例代码：
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------------ ---- ------------------------
----- -------------- ------- --------- -
----- - -
------ -
- --- ---- ------ ----- -- --
- --- ---- ------ ----- -- --
- --- ---- ------ ----- -- -
-
--
---------- - ------- -- -
-----------------------
--
---------- - ----- ------- -- -
---- --------------- -------------
--
-------- -
------ -
-------------
------------------------
--------------------------
----------------------------
--
--
-
-在这个示例中，我们创建了一个新的可排序列表组件 MySortableList。我们使用了组件 state 来存储列表中的所有项目。我们定义了一个叫做 handleSort 的方法来更新 state，从而反映出项目的新排序方式。在 render 方法中，我们传递 items、onChange 和 renderItem 给 SortableList 组件，以便实现拥有可拖动性的排序列表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005737f81e8991b448e9729