Angular Dragula DropModel Event fire it only from left to right

Question

I got two column made with dragula where I can drag&drop

<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>

and

<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>

I was able to fire an event that will let me read the correct value in my component constructor

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

My only problem is that I need that dropModel event to only fire when I drag from the fist to the second column. I tried to rename task-group with task-group1 and task-group2 but I cannot drag&drop if [dragula] got different name.

Bot format and doclist are just string[] array. How can I know if it fire from the first task-group?

Answer 1

Ok I find an answer really fast this time. You just need to add an id to your dragula 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>

and check it in your event

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