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

Question

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

红线显示电流

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

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

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

我想到的第一件事是传递多个引用，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>