angular2+ 實現拖拽排序功能

第一步：安裝依賴包

npm i ng2-dragula -D

第二步：在模塊文件中配置注入器的地方注入 ng2-dragula

import {DragulaModule} from 'ng2-dragula';

@NgModule({
  declarations: [
  ],
  imports: [
    DragulaModule.forRoot()
  ],
  providers: [
    {provide: NZ_I18N, useValue: zh_CN},
  ]
})
export class AppModule {
}

第三步：在html中使用該插件

<div class="container" dragula="CLICKS" [(dragulaModel)]="temOptionsOne">
  <div *ngFor="let i of temOptionsOne" style="cursor: pointer;">
    <div *ngIf="i.checked" style="background: #e8e8e8;padding: 5px 10px;border-radius: 10px;margin-bottom: 10px;">
      {{i.label}}
    </div>
  </div>
</div>

效果：