Angular 4+的可拖动嵌套列表

Angular 4+的可拖动嵌套列表
插件名称 ngx-nestable
发布时间 2020年5月28日
插件作者 cybercomet

一个可拖动,可嵌套,可排序,可触摸的列表组件,适用于Angular 4及更高版本。

特征

  • 拖放
  • 排序
  • 活动(拖放,移出,移出,移出)// TODO
  • 套料
  • 触摸支持// TODO

安装:

# NPM
$ npm install ngx-nestable --save

使用:

app.module.ts

import { NestableModule } from 'ngx-nestable';

@NgModule({
  imports: [NestableModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts

  public options = {
    fixedDepth: true
  } as NestableSettings;
  public list = [
    { 'id': 1 },
    {
      'expanded': true,
      'id': 2, 'children': [
        { 'id': 3 },
        { 'id': 4 },
        {
          'expanded': false,
          'id': 5, 'children': [
            { 'id': 6 },
            { 'id': 7 },
            { 'id': 8 }
          ]
        },
        { 'id': 9 },
        { 'id': 10 }
      ]
    },
    { 'id': 11 }
  ];

app.html

 <ngx-nestable [(list)]="list" [options]="options" [template]="itemTemplate">
  </ngx-nestable>
  
  <ng-template #itemTemplate let-row>
  <button mat-icon-button [ngxNestableDragHandle]="row">
  <mat-icon>drag_handle</mat-icon>
  </button>
  
  <button mat-icon-button *ngIf="row.item.children && row.item.children.length; else empty_item" [ngxNestableExpandCollapse]="row">
  <mat-icon>{{row.item.$$expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}
  </mat-icon>
  </button>
  
  <div>Item: {{row.item.id}}</div>
  </ng-template>
 <ng-template #empty_item>
  <span style="width: 40px"></span>
  </ng-template>

API

输入值

名称 类型 默认值 描述
list Array 将显示在树中的项目
template TemplateRef 树项目的HTML模板。在此模板内,您可以放置​​指令(ngxNestableDragHandle和ngxNestableExpandCollapse)。这将描述这些元素的自定义外观和位置。否则,将应用默认功能。选项

选项

名称 类型 默认值 描述
fixedDepth boolean false 保留物品以保持其初始深度
maxDepth number 5 最大嵌套深度
threshold number 20 以像素为单位的距离,之后应用水平移动(嵌套)。也给树填充。
disableDrag boolean false 禁用/启用拖动事件
template TemplateRef 树项目的HTML模板。在此模板内,您可以放置​​指令(ngxNestableDragHandle和ngxNestableExpandCollapse)。这将描述这些元素的自定义外观和位置,否则将应用默认功能。输出

输出值

名称 类型 描述
drag void 启动项目拖动时发出事件
drop void 放下物品时发出事件
disclosure void 更改项目展开/折叠状态时发出事件