使用 cdkDropListConnectedTo 连接多个拖放区的 Angular CDK [英] Angular CDK connecting multiple drop zones with cdkDropListConnectedTo

问题描述

我正在创建一个带有泳道的简单板界面，比如 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

解决方案

结果 DragDropscdkDropListConnectedTo 连接到不同的放置区，例如

[cdkDropListConnectedTo]="[inProgress, done]"

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

I am creating a simple board interface with swim lanes think Jira swimlane or trello boards

The red lines shows current flow

The blue shows the flow which I would like to implement

I have three columns named "To Do", "In Progress" and "Done". Currently I can drag an item from To Do to In Progress, from In Progress to Done and from Done back to To do using cdkDropListConnectedTo.

What I want to know is that who can I move item from "Done" to "To Do" and "In Progress", similarly how to move item from "In Progress" to both "Done" and "To Do" and from "Done" to both "In Progress" and "To Do".

The first thing which I though of was passing multiple references to cdkDropListConnectedTo but that did not work. I will appreciate if anyone can point me right direction.

Thanks

Here is what I have written so far: https://stackblitz.com/edit/angular-mpedfr?file=src%2Fapp%2Fapp.component.html

解决方案

Turns out DragDropscdkDropListConnectedTo connecting to different dropzones e.g

[cdkDropListConnectedTo]="[inProgress, done]"

Complete example: https://stackblitz.com/edit/angular-mpedfr

这篇关于使用 cdkDropListConnectedTo 连接多个拖放区的 Angular CDK的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！