在 Web 前端开发中，我们常常需要对列表数据进行排序、拖拽和删除等交互操作，为了避免重复造轮子，我们可以使用已经成熟的第三方库来实现这些功能。本文将介绍一款 npm 包 ngx-reorder，它提供了一个简单易用的 API，可以帮助我们实现列表的拖拽排序功能。本文将从以下几个方面介绍 ngx-reorder 的使用教程：
- 安装 ngx-reorder
使用 npm 包管理工具，可以非常方便地安装 ngx-reorder。打开终端命令行界面，进入项目目录，输入以下命令：
--- ------- ----------- ------
安装完成后，在项目的 node_modules 文件夹中会生成 ngx-reorder 文件夹。
- 引入 ngx-reorder
在需要使用 ngx-reorder 的组件中，先通过以下方法导入 ngx-reorder：
------ - ------------- - ---- --------------
然后在该组件的 @NgModule 中添加 ReorderModule：
-----------
-------- -
-- ---
-------------
--
-- ---
--- 给列表加入拖拽排序功能
首先在 HTML 中定义一个列表，这里以 Angular 为例：
--- -------------------- ------------------------------ --- ----------- ---- -- ------------------- -----
其中，[reorderable]="true" 表示该列表可以进行拖拽排序操作，(reorder)="onReorder($event)" 表示当列表发生排序时，会自动调用 onReorder 方法。
在对应的组件中，定义这个 onReorder 方法：
---------------- -------------- ---- - ----- ------------ --------- - ------ -------------------------- -- ---------------------------- ------- -
该方法接收一个 ReorderEvent 对象作为参数，包含了排序前后元素的下标。我们可以通过该对象实现对列表的排序。
- 其他可选配置
除了上述基本功能，ngx-reorder 还提供了其他可选配置，方便我们自定义拖拽排序的效果。以下为介绍一些常用的配置参数：
- handleClass：string（默认值：null），可选，定义拖拽操作的句柄元素的 CSS 类名，只有拖拽到该元素上才会触发排序操作。
- ghostClass：string（默认值："reorder-ghost"），可选，定义拖拽操作时的阴影元素的 CSS 类名。
- onDragStart：Function，可选，定义开始拖拽时的回调函数。
- onDragEnd：Function，可选，定义结束拖拽时的回调函数。
示例代码：（在组件的 ngOnInit 方法中调用）
---------- -
--------- - ------- ------ ------ ------ -------
---------------- - ---------
--------------- - --------
---------------- - ------- ------------- -- -
--------------------
--
-------------- - ------- ------------- -- -
--------------------
--
---- --------------------
---------------------------
-------------------------
---------------------------------
-----------------------------
------------------------------
--- ------------ ----------- ---- -- ------
----- -----------------------
----- -------------------------------
-----
------ 总结
ngx-reorder 是一款非常简便易用的列表拖拽排序库，它提供了高度定制化的配置，可以满足多种排列效果的需求。本文介绍了 ngx-reorder 的安装方法、基本使用方法和常用配置，相信读者已经掌握了如何使用 ngx-reorder 实现列表的拖拽排序功能。希望本文对读者的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f7a238a385564ab69cf