angularangular-materialangular-dragdrop

How do I update a variable in Angular when dragging from a specific droplist using CdkDragDrop?


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


Solution

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