web-dev-qa-db-ja.com

Angular cdkDropListConnectedToで複数のドロップゾーンを接続するCDK

スイムレーンを使用したシンプルなボードインターフェイスを作成しています。Jiraスイムレーンまたはtrelloボードを考えてください。

enter image description here 赤い線は電流の流れを示します

青は実装したいフローを示します

「To Do」、「In Progress」、「Done」という3つの列があります。現在、cdkDropListConnectedToを使用して、アイテムを[To Do]から[In Progress]に、[In Progress]から[Done]に、[Done]から[To do]にドラッグできます。

私が知りたいのは、アイテムを「完了」から「To Do」と「進行中」に誰が移動できるかということです。同様に、アイテムを「進行中」から「完了」と「To Do」の両方に移動する方法と「 「進行中」と「予定」の両方に完了しました。

私が最初に思ったのは、cdkDropListConnectedToへの複数の参照を渡すことでしたが、それは機能しませんでした。誰かが私を正しい方向に向けることができれば私は感謝します。

ありがとう

これが私がこれまでに書いたものです： https://stackblitz.com/edit/angular-mpedfr?file=src%2Fapp%2Fapp.component.html

angulartypescriptangular-materialangular-material2angular-cdk
6
alt255

DragDrops cdkDropListConnectedToが異なるドロップゾーンに接続していることがわかります。

[cdkDropListConnectedTo]="[inProgress, done]"

完全な例： https://stackblitz.com/edit/angular-mpedfr

3
alt255

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