Angular 4+的可自定义可排序组件– ngx-sortable

Angular 4+的可自定义可排序组件– ngx-sortable
插件名称 ngx-sortable
发布时间 2020年5月29日
插件作者 manishjanky

ngx-sortable是一个angular可排序列表组件,支持拖放排序

特征

  • 自定义模板
  • 可订制
  • 拖放排序

安装:

# Yarn
$ yarn add ngx-sortable

# NPM
$ npm install ngx-sortable --save

使用:

与webpack和tsc构建/ angular-cli构建一起使用
导入NgxSortableModule到您的app.module;

import { NgxSortableModule } from 'ngx-sortable'

添加NgxSortableModule到您的NgModule的导入:

@NgModule({
  imports: [
    ...,
    NgxSortableModule
  ],
  ...
})
class YourModule { ... }

<ngx-sortable></ngx-sortable>在模板中使用以在视图中添加可排序列表

 <ngx-sortable [items]="items" [name]="'List'" (listSorted)="listOrderChanged($event)">
<ng-template let-item>
<div class="sortable-list-item">
{{item}}
</div>
</ng-template>
</ngx-sortable>

其中的内容<ng-template> </ng-template>是将用于显示列表项的模板。也可以相应地命名该类,这只是一个示例。创建一个类并将其添加到您的根style.css

设置

输入

  • items: any[] -列表项数组。
  • name: string -将在标题中显示的列表名称。
  • listStyle: any-列出样式,例如height, width
  • showHeader: boolean -标志隐藏/显示标题默认为true
listStyle = {
        width:'300px', //列表的宽度默认为300
        height: '250px', //列表的高度默认为250
      }

输出

  • listSorted($event): Event -对列表进行排序时,将发出具有更新顺序的listSorted事件

$event排序列表在哪里