角CDK用cdkDropListConnectedTo连接多个放置区域

Question

我正在使用泳道创建一个简单的董事会界面，认为是Jira swimlane或trello董事会

红线显示电流

蓝色显示我要实现的流程

我有三列分别名为“待办事项”，“进行中”和“完成”。目前，我可以使用将项目从“待办事项”拖到“进行中”，从“进行中”拖到“完成”，再从“完成”拖回到“待办事项” 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

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

[cdkDropListConnectedTo]="[inProgress, done]"

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