在angular中使用ng2-dragula实现拖动

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);
 }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值