web-dev-qa-db-fra.com

Angular CDK connectant plusieurs zones de dépôt avec cdkDropListConnectedTo

Je crée une interface de planche simple avec des couloirs de natation pensez aux couloirs de natation Jira ou trello

enter image description here Les lignes rouges indiquent le flux actuel

Le bleu montre le flux que je voudrais mettre en œuvre

J'ai trois colonnes nommées "To Do", "In Progress" et "Done". Actuellement, je peux faire glisser un élément de À faire à En cours, de En cours à Terminé et de Terminé à À faire en utilisant cdkDropListConnectedTo.

Ce que je veux savoir, c'est que qui puis-je déplacer un élément de "Terminé" vers "A faire" et "En cours", de la même façon comment déplacer l'élément de "En cours" vers "Terminé" et "A faire" et de " Fait "à la fois" En cours "et" À faire ".

La première chose dont j'ai pensé était de passer plusieurs références à cdkDropListConnectedTo mais cela n'a pas fonctionné. J'apprécierai si quelqu'un peut m'orienter dans la bonne direction.

Merci

Voici ce que j'ai écrit jusqu'à présent: https://stackblitz.com/edit/angular-mpedfr?file=src%2Fapp%2Fapp.component.html

angulartypescriptangular-materialangular-material2angular-cdk
6
alt255

Il s'avère que DragDrops cdkDropListConnectedTo se connecte à différentes dropzones, par exemple

[cdkDropListConnectedTo]="[inProgress, done]"

Exemple complet: https://stackblitz.com/edit/angular-mpedfr

3
alt255

Référencez les zones de dépôt dans cdkDropListConnectedTo

    <div class="board">
      <div class="lane lane-1" 
        cdkDropList 
        #todo="cdkDropList"
        [cdkDropListData]="toDoList"
        [cdkDropListConnectedTo]="[inProgress, done]"
        (cdkDropListDropped)="drop($event)"
        >
        <div class="heading todo">To Do</div>
        <div *ngFor="let item of toDoList" class="task"
           cdkDrag>{{item}}</div>
      </div>

      <div class="lane lane-2" 
        cdkDropList 
        #inProgress="cdkDropList"
        [cdkDropListData]="inProgressList"
        [cdkDropListConnectedTo]="[done,todo]"
        (cdkDropListDropped)="drop($event)"
        >
        <div class="heading doing">In Progress</div>
        <div *ngFor="let item of inProgressList" class="task" cdkDrag>{{item}}</div>
      </div>

      <div class="lane lane-2" 
        cdkDropList 
        #done="cdkDropList"
        [cdkDropListData]="doneList"
        [cdkDropListConnectedTo]="[todo,inProgress]"
        (cdkDropListDropped)="drop($event)"
        >
        <div class="heading done">Done</div>
        <div *ngFor="let item of doneList" class="task" cdkDrag>{{item}}</div>
      </div>
0
Jurgens