angulartypescriptdrag-and-dropdragulang2-dragula

Angular Dragula DropModel Event fire it only from left to right


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?


Solution

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