拖拽组件（ ngx-sortablejs）

引入module

import { SortablejsModule } from 'ngx-sortablejs';
...
@NgModule({imports: [SortablejsModule,],declarations: [// your components],exports: []
})
export class SharedModule { }

html:

<div [sortablejs]="data" [sortablejsOptions]="options"><div *ngFor="let item of data" [ngStyle]="{'display': block?'block':'inline-block'}"><ng-template [ngTemplateOutlet]="renderItem" [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template></div>
</div>

ts:

import { Component, OnInit, Input, TemplateRef, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';@Component({selector: 'app-ngx-dnd-content',templateUrl: './ngx-dnd-content.component.html',styles: []
})
export class NgxDndContentComponent implements OnInit {@ViewChild('box', { static: true }) box: ElementRef;@Input() data: any;@Input() block: boolean = false;@Input() renderItem: TemplateRef<void>;@Output() private outer = new EventEmitter<string>();public options: any;constructor() {this.options = {onUpdate: (event: any) => {this.outer.emit(this.data);}};}ngOnInit() {}}

使用拖拽组件

//  subNewsCategoryList: any = [];<app-ngx-dnd-content *ngIf="subNewsCategoryList.length>0" [data]="subNewsCategoryList" [renderItem]="cardTemplate"(outer)="sortChange($event)"></app-ngx-dnd-content><ng-template #cardTemplate let-i><nz-card nzHoverable style="display: inline-block;margin-right:12px" [nzActions]="[op1, op2]"><ng-template #op1><a (click)="deleteItem(i.id,i.subNewsCategoryName)">{{'menu.button.delete' | i18n}}</a></ng-template><ng-template #op2><a (click)="editItem(i.id)"> {{'menu.button.edit' | i18n}}</a></ng-template><nz-card-meta [nzAvatar]="nzAvatar" [nzTitle]="nzTitle" [nzDescription]="nzDescription"><ng-template #nzAvatar><nz-avatar [nzSize]="65" [nzSrc]="i.fileUrl"></nz-avatar></ng-template><ng-template #nzTitle><a (click)="enter(i.subNewsCategoryName,i.id)">{{ i.subNewsCategoryName }}</a></ng-template><ng-template #nzDescription><p>{{getSubNewsCategoryCount(i.subNewsCategoryCount)}}</p><p>{{getNewsCount(i.newsCount)}}</p></ng-template></nz-card-meta></nz-card></ng-template>