In my application, I have set up two columns using dragula where I can easily drag and drop elements.
<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 have successfully implemented an event that allows me to retrieve 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);
})
);
However, my challenge lies in making sure that the dropModel event only triggers when dragging from the first column to the second. I attempted to rename task-group to task-group1 and task-group2 but encountered issues with dragging if [dragula] had a different name.
The arrays format and doclist both contain string values. How can I determine if the event originates from the first task-group?