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