角CDK用cdkDropListConnectedTo连接多个放置区域 [英] Angular CDK connecting multiple drop zones with cdkDropListConnectedTo

问题描述

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

红线表示电流流动

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

我有三个列，分别为待办事项"，进行中"和完成".目前，我可以使用 cdkDropListConnectedTo 将项目从待办事项"拖到进行中"，从进行中"拖到完成"，再从完成"拖回待办事项".

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

我第一件事就是将多个引用传递给 cdkDropListConnectedTo ，但这没有用.如果有人能为我指明正确的方向，我将不胜感激.

谢谢

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

解决方案

显示出DragDrops cdkDropListConnectedTo 例如，连接到不同的拖放区

[cdkDropListConnectedTo] ="[正在进行中，已完成]"

完整示例: 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

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