Angular CDK connecting multiple drop zones with cdkDropListConnectedTo

Question

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

Solution 1

Turns out DragDropscdkDropListConnectedTo connecting to different dropzones e.g

[cdkDropListConnectedTo]="[inProgress, done]"

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

Solution 2

You can now use a global container with cdkDropListGroup attribute, in which all child containers with cdkDropList attribute are linked together, no need to add all the [cdkDropListConnectedTo] stuff

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

Solution 3

You can connect to multiple containers, like:

[cdkDropListConnectedTo]="[doneList,doneList1]"

Comments

[alt255]

You can now also use cdkDropListGroup as mentioned here stackoverflow.com/a/55159048/6816518

[muuvmuuv]

Can u share an example of this but connected through id? I tried to adopt the docs but without success.

[aruno]

If you'd set the id of a cdkDropList to a known string and you're trying to set cdkDropListConnectedTo for another list you'd need to set the value as a string [cdkDropListConnectedTo]="['inProgress', 'done']". The example as shown would require that inProgress is a string variable in the component, or a reference to a cdkDropList.

[aruno]

Note you do need to reference 'both directions'. You can't just put cdkDropListConnectedTo on list A pointing to list B, you need also make list B point to list A (which honestly is a pain!)