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

Also watch out if you're trying to nest lists - it gets complicated and some things don't work well. This is an issue for tracking purposes https://github.com/angular/components/issues/16671 — Simon_Weaver, Jun 28 '21 at 00:03

score 21 · Answer 1 · answered Mar 14 '19 at 09:31

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>

score 19 · Accepted Answer · answered Nov 05 '18 at 07:24

19

Turns out DragDropscdkDropListConnectedTo connecting to different dropzones e.g

[cdkDropListConnectedTo]="[inProgress, done]"

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

answered Nov 05 '18 at 07:24

alt255

3,396
2
14
20

1

You can now also use `cdkDropListGroup` as mentioned here https://stackoverflow.com/a/55159048/6816518 – alt255 Jan 06 '20 at 12:19
Can u share an example of this but connected through `id`? I tried to adopt the docs but without success. – muuvmuuv Jul 30 '20 at 10:02
3

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. – Simon_Weaver Jun 27 '21 at 23:56
I was having issues using a dynamic version of lists. In case anyone needs a sample like that using lists generated in runtime: https://stackblitz.com/edit/angular-cof4vm?file=src/app/app.component.css – Felipe Esteves Mar 29 '23 at 22:51

score 2 · Answer 3 · edited Mar 31 '21 at 12:53

2

You can connect to multiple containers, like:

[cdkDropListConnectedTo]="[doneList,doneList1]"

edited Mar 31 '21 at 12:53

Laurent

12,287
7
21
37

answered Mar 31 '21 at 06:30

Ramazan Afridi

23
3

score 0 · Answer 4 · answered Jan 08 '20 at 11:29

Reference the drop zones in 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>

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!) — Simon_Weaver, Jun 28 '21 at 00:01

Angular CDK connecting multiple drop zones with cdkDropListConnectedTo

4 Answers4

Linked