Angular CDK 使用 cdkDropListConnectedTo 连接多个拖放区

Question

我正在创建一个带有泳道的简单板界面，例如 Jira 泳道或 trello 板

红线表示电流流动

蓝色显示我想要实现的流程

我有三个列，分别名为“待办事项”、“进行中”和“完成”。目前我可以使用cdkDropListConnectedTo将一个项目从To Do拖到In Progress，从In Progress拖到Done，从Done拖回To do。

我想知道谁可以将项目从“完成”移动到“待办”和“进行中”，同样如何将项目从“进行中”移动到“完成”和“待办”从“完成”到“进行中”和“待办事项”。

我想到的第一件事是将多个引用传递给cdkDropListConnectedTo，但这不起作用。如果有人能指出正确的方向，我将不胜感激。

谢谢

这是我到目前为止所写的： https://stackblitz.com/edit/angular-mpedfr?file=src%2Fapp%2Fapp.component.html

Answer 1

您现在可以使用具有 cdkDropListGroup 属性的全局容器，其中所有具有 cdkDropList 属性的子容器都链接在一起，无需添加所有 [cdkDropListConnectedTo] 的东西

<div cdkDropListGroup>
    <div cdkDropList>
        <div cdkDrag>Drag Me</div>
    </div>
    <div cdkDropList>
        <div cdkDrag>Drag Me Also</div>
    </div>
    ...
</div>

Answer 2

原来 DragDropscdkDropListConnectedTo 连接到不同的拖放区，例如

[cdkDropListConnectedTo]="[inProgress, done]"

完整示例：https://stackblitz.com/edit/angular-mpedfr

Answer 3

您可以连接到多个容器，例如：

[cdkDropListConnectedTo]="[doneList,doneList1]"

Answer 4

在 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>