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

Question

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

红线表示电流

蓝色是我要实现的流程

我有三个列，分别名为 "To Do"、"In Progress" 和 "Done"。目前，我可以使用 cdkDropListConnectedTo.

将项目从“待办事项”拖到“进行中”，从“进行中”拖到“完成”，然后从“完成”拖回“待办事项”

我想知道谁可以将项目从 "Done" 移动到 "To Do" 和 "In Progress"，同样如何将项目从 "In Progress" 移动到两者 "Done" 和 "To Do" 以及从 "Done" 到 "In Progress" 和 "To Do"。

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

谢谢

以下是我目前所写的内容： https://stackblitz.com/edit/angular-mpedfr?file=src%2Fapp%2Fapp.component.html

Answer 1

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

[cdkDropListConnectedTo]="[inProgress, done]"

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

Answer 2

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

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

Answer 3

引用 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>

Answer 4

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

[cdkDropListConnectedTo]="[doneList,doneList1]"

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

Angular CDK connecting multiple drop zones with cdkDropListConnectedTo

typescript

angular-material

angular-material2

angular

angular-cdk