Angular Dragula DropModel 事件仅从左到右触发它

问题描述

我有两列用 dragula 制作，我可以在其中拖放

<div class="taskboard-cards" [dragula]='"task-group"' [(dragulaModel)]="format">
    <div class="taskboard-task" *ngFor="let forDoc of format | filter: filterValue">
      <div class="taskboard-task-title">{{forDoc}}</div>
    </div>
</div>

和

<div class="taskboard-cards" [dragula]='"task-group"' [(dragulaModel)]="doclist">
    <div class="taskboard-task" *ngFor="let docL of doclist">
      <div class="taskboard-task-title">{{docL}}</div>
    </div>
</div>

我能够触发一个事件，让我在组件构造函数中读取正确的值

this.subs.add(this.dragulaService.dropModel("task-group")
  .subscribe(({ el,target,source,sourceModel,targetModel,item }) => {
    console.log('dropModel:');
    console.log(el);
    console.log(source);
    console.log(target);
    console.log(sourceModel);
    console.log(targetModel);
    console.log(item);

    this.updateDoc(this.doc,targetModel);
  })
);

我唯一的问题是我需要 dropModel 事件仅在我从第一列拖到第二列时触发。 我试图用 task-group1 和 task-group2 重命名任务组，但如果 [dragula] 的名称不同，我无法拖放。

Bot 格式和 doclist 只是 string[] 数组。 我怎么知道它是否从第一个任务组触发？

解决方法

好的，这次我很快就找到了答案。你只需要在你的dragula div中添加一个id

<div class="taskboard-cards" [dragula]='"task-group"' id="1" [(dragulaModel)]="format">
    <div class="taskboard-task" *ngFor="let forDoc of format | filter: filterValue">
      <div class="taskboard-task-title">{{forDoc}}</div>
    </div>
  </div>

并在您的活动中查看

this.subs.add(this.dragulaService.dropModel("task-group")
  .subscribe(({ el,target,source,sourceModel,targetModel,item }) => {
    console.log('dropModel:');
    console.log(el);
    console.log(source.id); //just check if this one is 1
    console.log(target);
    console.log(sourceModel);
    console.log(targetModel);
    console.log(item);

     this.updateDoc(this.doc,targetModel);
  })
);