ng-drag-to-reorder 是一个 Angular 应用程序的 npm 包，用于实现列表拖拽排序功能。本文将详细介绍如何使用此 npm 包。
安装
使用 npm 安装 ng-drag-to-reorder：
npm install ng-drag-to-reorder --save
添加依赖
在你的 Angular 应用程序中的 app.module.ts 中，添加以下代码：
-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------
-----------
------------- -
-------------
--
-------- -
--------------
--------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用指南
通过把 ng-drag-to-reorder 的指令加到 html 标记上，即可开启列表拖拽排序功能。
基本使用
<ul drag-to-reorder>
<li *ngFor="let item of items">{{item}}</li>
</ul>高级使用
ng-drag-to-reorder 可以在拖拽完成后执行指定的回调函数。你可以在回调函数中更新你的数据源。看下面的例子：
<ul drag-to-reorder (reordered)="onReordered($event)">
<li *ngFor="let item of items">{{item}}</li>
</ul>-- -------------------- ---- -------
------------
--------- -----------
--------- -
--- --------------- ----------------------------------
--- ----------- ---- -- --------------------
-----
-
--
------ ----- ------------- -
----- - --------- --------- ----------
------------------ ------------- -
----- --------- - ---------------------------------- ------
-------------------------------- -- -----------
-
-自定义拖拽手柄
你可以自定义一个拖拽手柄来指定哪些元素可以拖拽。
<ul drag-to-reorder dragHandle=".my-handle">
<li *ngFor="let item of items"><span class="my-handle">x</span>{{item}}</li>
</ul>在上面的例子中，只有 .my-handle 元素中的文本 "x" 才可以用来拖拽排序。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ - ---- ---------------------
------------
--------- -----------
--------- -
--- --------------- ----------------------------------
--- ----------- ---- -- ------------ ---------------------------------------
-----
-
--
------ ----- ------------- -
----- - --------- --------- ----------
------------------ ------------- -
----- --------- - ---------------------------------- ------
-------------------------------- -- -----------
-
--- -------------------- ---- -------
-------
-- -
----------- -----
-
---------- -
------- -----
-------- -----
----------------- ----------
-
--------
---------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600563c481e8991b448e1235