Angular Dragula DropModel Event 仅从左到右触发它

Question

我有两个用 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] 有不同的名称，我无法拖放。

机器人格式和文档列表只是字符串[] 数组。我怎么知道它是否从第一个任务组触发？

Answer 1

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

<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);
  })
);

Angular Dragula DropModel Event 仅从左到右触发它

Angular Dragula DropModel Event fire it only from left to right

drag-and-drop

typescript

dragula

ng2-dragula

angular