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

Sprain

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 github.com/angular/components/issues/16671 – Maulstick

Did you manage? – Dorella

Answer 1

Turns out DragDropscdkDropListConnectedTo connecting to different dropzones e.g

[cdkDropListConnectedTo]="[inProgress, done]"

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

Sprain

You can now also use cdkDropListGroup as mentioned here https://mcmap.net/q/758722/-angular-cdk-connecting-multiple-drop-zones-with-cdkdroplistconnectedto – Sprain

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

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. – Maulstick

I was having issues using a dynamic version of lists. In case anyone needs a sample like that using lists generated in runtime: stackblitz.com/edit/angular-cof4vm?file=src/app/… – Lefton

Answer 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>

Southwesterly

Answer 3

You can connect to multiple containers, like:

[cdkDropListConnectedTo]="[doneList,doneList1]"

Daliladalis

Answer 4

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>

Ker

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!) – Maulstick