Nello script #256 abbiamo visto come rendere ordinabili gli elementi di una lista utilizzando il supporto al Drag&Drop offerto dalla libreria Angular CDK. In questo script continuiamo a esplorare le capacità di Drag&Drop offert da questa libreria mostrado come sia possibile spostare elementi tra liste diverse. Questa funzionalità torna utile quando abbiamo una lista di elementi disponibili sulla sinistra e vogliamo trascinare sulla lista di destra quelli che vogliamo selezionare.

Per poter spostare elementi da una lista all'altra dobbiamo collegare le liste utilizzando la direttiva cdkDropListConnectedTo. A questa passiamo o una stringa contenente l'id della lista collegata, oppure il nome di una template variable che si riferisce alla lista collegata. Il prossimo esempio mostra come collegare due liste utilizzando entrambi gli approcci.

<!-- template variable -->
<div cdkDropList #left="cdkDropList" [cdkDropListConnectedTo]="[right]"></div>
<div cdkDropList #right="cdkDropList" [cdkDropListConnectedTo]="[left]"></div>

<!-- id -->
<div cdkDropList id="left" [cdkDropListConnectedTo]="['right']"></div>
<div cdkDropList id="right" [cdkDropListConnectedTo]="['left']"></div>

Una volta connesse le liste dobbiamo reagire al drop di un elemento sulla lista tramite l'evento cdkDropListDropped. All'interno del metodo che gestisce l'evento usiamo il metodo transferArrayItem che sposta gli elementi negli array in binding con le liste. Il prossimo esempio mostra il codice completo.

  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>

  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>

export class ConnectedListComponent {
  todo = ['todo1', 'todo2', 'todo3', 'todo4'];

  done = ['todo'];

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

Questo esempio espande quello visto nello script precedente in quanto oltre a permettere di spostare elementi tra liste, continua a permettere di ordinare gli elementi nella stessa lista. Per questo motivo il metodo che gestice l'evento di drop verifica prima se il container dell'elemento spostato è lo stesso e in caso positivo chiama il metodo moveItemInArray (in quanto siamo in presenza di un ordinamento nella stessa lista) mentre in caso negativo chiama transferArrayItem (in quanto siamo in presenza di uno spostamento di un elemento su un'altra lista).