1.安装
npm install ng2-dragula
2.在module文件引入DragulaModule
import { DragulaModule } from 'ng2-dragula';
@NgModule({
declarations: [
],
imports: [
DragulaModule.forRoot()
],
providers: [
]
})
3.在src目录下的polyfills.ts中添加以下代码,否则可能出现报错信息 Uncaught ReferenceError: global is not defined
(window as any).global = window;
4.在html中使用该插件
<div class="changesite" dragula="VAMPIRES" [(dragulaModel)]="op" (dragulaModelChange)="dragnumber($event)">
<div class="circular" *ngFor="let item of op; let num = index">
<button nz-button nzType="solid" (click)="completetestassembly()" class="circularnumber">{{num+1}}</button>
</div>
</div>
此处注意:请勿将放在同一元素上[dragula]或与[(dragulaModel)]放在同一元素上*ngFor。
5.获得拖动后的数据
dragnumber(numer) {
console.log(numer);
}