在前端开发中，我们常常需要对一些组件进行拖拽排序。而 react-sortablejs 就是一个非常优秀的 React 拖拽排序插件，它可以帮助我们轻松实现可拖拽排序的组件。
安装
在使用之前，我们需要先安装它。在终端中输入以下命令进行安装：
npm install react-sortablejs --save
使用
安装完成后，我们就可以在项目中引入 react-sortablejs 进行使用了。
首先，我们需要在组件中引入 Sortable 组件：
import React from 'react'; import Sortable from 'react-sortablejs';
接着，在渲染组件时，我们可以将需要拖拽排序的子组件作为子元素传入 Sortable 组件中。需要注意的是，子元素必须要拥有一个 data-id 属性，以便于后续排序操作。
-- -------------------- ---- -------
----- ---- - -
- --- --------- ----- ----- -- --
- --- --------- ----- ----- -- --
- --- --------- ----- ----- -- --
- --- --------- ----- ----- -- --
- --- --------- ----- ----- -- --
--
----- ------------ ------- --------------- -
-------- -
------ -
---------
----------
---------- ----
--
-
-------------- -- -
---- ------------- ------------------
-----------
------
---
-----------
--
-
-
------ ------- -------------在上面的代码中，我们定义了一个 SortableList 组件，在渲染时将需要排序的子元素传入 Sortable 组件中。并且，我们还设置了一些参数，例如 animation，用于设置拖拽排序时的动画效果。
接下来，我们就可以看到一个带有拖拽排序功能的组件。
参数
使用 react-sortablejs 进行拖拽排序时，我们还可以通过传入不同的参数来控制其行为。下面是一些常用的参数：
options
options 参数是一个对象，用于设置拖拽排序时的各种选项。常用的选项有：
animation: 设置动画的时间，单位为毫秒；handle: 设置拖拽排序的手柄元素；group: 设置当前组件所属的分组；dragClass: 设置拖拽时的类名；ghostClass: 设置拖拽时的占位元素的类名；chosenClass: 设置被拖拽的元素的类名；forceFallback: 强制使用 fallback 方式进行拖拽排序；fallbackClass: 设置使用 fallback 方式时的类名。
tag
tag 参数用于设置 Sortable 组件最终渲染的 HTML 元素类型，默认为 div。
<Sortable tag='ul'> <li>item 1</li> <li>item 2</li> <li>item 3</li> </Sortable>
onChange
onChange 参数用于设置当排序发生变化时的回调函数，默认为 null。该函数的参数为排序后的新数组。
-- -------------------- ---- -------
---------
----------------- -- -
---------------------
--
-
---- --------------------- -------
---- --------------------- -------
---- --------------------- -------
-----------总结
通过学习本文，我们可以轻松掌握 react-sortablejs 的基本使用方法，以及如何使用不同的参数来控制组件的行为。同时，使用拖拽排序功能可以使我们的组件更加易于使用、直观、美观。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/202968