web-dev-qa-db-fra.com

Comment utiliser Angular7 (matériau angulaire) glisser-déposer entre deux composants

Comme récemment angular introduit glisser = déposer angular matériel https://material.angular.io/cdk/drag-drop/overview .

Tous les exemples décrivent avec un seul composant. Comment l'utiliser dans deux composants différents, faites glisser un élément de composant et déposez-le dans un autre composant.

angulardrag-and-dropangular-materialangular7angular-cdk
13
Jomy Joseph

Vous pouvez utiliser les propriétés id et cdkDropListConnectedTo pour lier les deux listes:

Composant 1:

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Composant 2:

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Si vous devez connecter plusieurs listes à une liste, vous pouvez utiliser la syntaxe suivante: [cdkDropListConnectedTo]="['list-1', 'list-2', 'list-3', 'list-4']"

Après avoir lié les listes, vous devez mettre à jour correctement une ou les deux listes en fonction des actions. Vous pouvez le faire sur la fonction drop comme ceci:

drop(event: CdkDragDrop<string[]>) {
    if (event.container.id === event.previousContainer.id) {
      // move inside same list
      moveItemInArray(this.list, event.previousIndex, event.currentIndex);
    } else {
      // move between lists
    }
}

Pour déplacer des éléments entre des listes, vous voudrez peut-être garder une trace des listes de manière centralisée. Vous pouvez le faire en utilisant un service, un magasin ou d'autres méthodes.

23
GCSDC

Pas sûr que la solution ci-dessus fonctionne toujours avec angular 7.2.9 et angular material/cdk 7.3.5

Cela n'a pas fonctionné pour moi et donc après quelques moments difficiles - j'ai réussi à le faire fonctionner en utilisant la directive cdkDropListGroup. Tous les cdkDropList dans cdkDropListGroup seront disponibles pour supprimer des éléments. Vous n'avez plus besoin de connecter les listes de dépôt avec la propriété cdkDropListConnectedTo

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>
3
Alty

Composant1

<div cdkDropList id="list-1" cdkDropListConnectedTo="list-2" (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Composant 2

<div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of list" cdkDrag>{{ item }}</div>
</div>

Service partagé pour les deux composants

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

Composant parent

<div cdkDropListGroup>
<component1></component1>
<component2></component2>
</div>

appeler méthode d'abandon du composant

drop(event: CdkDragDrop<string[]>) {
      this.sharedService.drop(event);
  }
0
sumit singh