I am using Angular 8 with Material drag&drop. I have multiple droplists linked to three destination droplists. In my StackBlitz example here, I would like to allow only one item from the list with the id MajHermeticVirtues (second group under Major Hermetic Virtues). I have a boolean called allowedHermeticVirtues that I would like to set to false if I dragged an item from that list. If the variable is then set to false, how can I use it to block more items from the source list?
All the lists use
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
this.calculateTotal();
}
}
for drop events.
How can I update a variable if I dragged an item from a specific list? This question is almost what I am looking for, but only for a specific source list (in my case, the MajHermeticVirtues one).
Managed to get it working by changing my drop function as follows (not elegant, but seems to work):
drop(event: CdkDragDrop<any[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else if (event.previousContainer.id === 'MajHermeticVirtues') {
if (this.totalMajorHermeticVirtues < this.maxHermeticMajorVirtue) {
this.totalMajorHermeticVirtues++;
console.log('this.totalMajorHermeticVirtues :', this.totalMajorHermeticVirtues);
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
this.calculateTotal();
}
} else if (event.container.id === 'MajHermeticVirtues') {
this.totalMajorHermeticVirtues--;
console.log('this.totalMajorHermeticVirtues :', this.totalMajorHermeticVirtues);
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
this.calculateTotal();
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
this.calculateTotal();
}
}