重复不允许移动ng2-dragula

时间:2018-06-06 12:29:11

标签: angular ionic-framework ng2-dragula

我有两个列表我使用拖放复制项目从B到A列表如果项目已经存在重复不允许复制到A-list它可能在ng2-dragula中如何实现?

重复不允许复制到A-list中它可能在ng2-dragula中如何实现?

<div [dragula]='"second-bag"' id='left'>
    <ion-col>
      <ion-icon name="ionic" color="primary"></ion-icon>
    </ion-col>
  </div>
  <div [dragula]='"second-bag"' id='right'>
    <ion-col>
      <ion-icon name="map" color="secondary"></ion-icon>
    </ion-col>
  </div>

ts文件

constructor(public navCtrl  : NavController,
  private dragulaService: DragulaService)
{
  dragulaService.setOptions('first-bag', {
    copy: true,
    moves: function (el, container, handle) {
      return container.id !== 'no-drop';
    }
  });
  dragulaService.drag.subscribe((value) => {
    this.onDrag(value.slice(1));
  });
  dragulaService.drop.subscribe((value) => {
    this.onDrop(value.slice(1));
  });
  dragulaService.over.subscribe((value) => {
    this.onOver(value.slice(1));
  });
  dragulaService.out.subscribe((value) => {
    this.onOut(value.slice(1));
  });

}
private hasClass(el: any, name: string) {
  return new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)').test(el.className);
}
private addClass(el: any, name: string) {
  if (!this.hasClass(el, name)) {
    el.className = el.className ? [el.className, name].join(' ') : name;
  }
}
private removeClass(el: any, name: string) {
  if (this.hasClass(el, name)) {
    el.className = el.className.replace(new RegExp('(?:^|\\s+)' + name + '(?:\\s+|$)', 'g'), '');
  }
}
private onDrag(args) {
  let [e, el] = args;
  this.removeClass(e, 'ex-moved');
}
private onDrop(args) {
  let [e, el] = args;
  this.addClass(e, 'ex-moved');
}
private onOver(args) {
  let [e, el, container] = args;
  this.addClass(el, 'ex-over');
}
private onOut(args) {
  let [e, el, container] = args;
  this.removeClass(el, 'ex-over');
}

0 个答案:

没有答案