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