Utilizing Angular CDK to link several drop zones together using the cdkDropListConnectedTo directive

Question

Utilizing Angular CDK to link several drop zones together using the cdkDropListConnectedTo directive

Currently in the process of designing a basic board interface with swim lanes similar to Jira swimlane or trello boards

https://i.sstatic.net/7MBvm.png The red lines indicate the current flow

The blue lines represent the flow that I aim to implement

There are three columns labeled "To Do", "In Progress" and "Done". At the moment, I am able to drag an item from To Do to In Progress, from In Progress to Done, and from Done back to To Do using cdkDropListConnectedTo.

My question is how can I move an item from "Done" to "To Do" and "In Progress", and likewise, move an item from "In Progress" to both "Done" and "To Do", and from "Done" to both "In Progress" and "To Do"?

My initial thought was to pass multiple references to cdkDropListConnectedTo, but that approach did not yield the desired outcome. Any guidance in the right direction would be greatly appreciated.

Thank you

This is the progress I've made so far: https://stackblitz.com/edit/angular-mpedfr?file=src%2Fapp%2Fapp.component.html

angular typescript angular-material angular-material2 angular-cdk

Answer 1

Answer №1

You can now simplify your code by using a global container with the cdkDropListGroup attribute. This way, all child containers with the cdkDropList attribute are automatically linked together without the need to manually add the [cdkDropListConnectedTo] directive.

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

Answer 2

You can now simplify your code by using a global container with the cdkDropListGroup attribute. This way, all child containers with the cdkDropList attribute are automatically linked together without the need to manually add the [cdkDropListConnectedTo] directive.

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

Answer 3

Answer №2

It turns out that cdkDropListConnectedTo can connect to different dropzones, such as:

[cdkDropListConnectedTo]="[inProgress, done]"

For a complete example, check out: https://stackblitz.com/edit/angular-mpedfr

Answer 4

It turns out that cdkDropListConnectedTo can connect to different dropzones, such as:

[cdkDropListConnectedTo]="[inProgress, done]"

For a complete example, check out: https://stackblitz.com/edit/angular-mpedfr

Answer 5

Answer №3

To link to various containers simultaneously, utilize the following code:

[cdkDropListConnectedTo]="[doneList,doneList1]"

Answer 6

To link to various containers simultaneously, utilize the following code:

[cdkDropListConnectedTo]="[doneList,doneList1]"

Answer 7

Answer №4

Utilize the drop zones specified 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>

Answer 8

Utilize the drop zones specified 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>

Utilizing Angular CDK to link several drop zones together using the cdkDropListConnectedTo directive

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Creating a unique, interactive network graph with d3js in the Ionic framework's "Blank" template page

Make simultaneous edits to multiple cells in IGX GRID for Angular

Overriding Bootstrap Modals with PhaserJS Canvas

Using TypeScript to implement functions with multiple optional parameters

Checkbox: Customize the appearance of the root element

I'm searching for the source code of Angular's `ViewContainerRef` - where can I locate it

How can I incorporate MS Teams call recording into my web platform?

Typescript error: The value "X" cannot be assigned to this type, as the properties of "Y" are not compatible

Using data analysis to customize the appearance of boundaries across various map styles - Google Maps Javascript API V3

Having trouble retrieving certain header values in Angular 4

Utilizing combinedReducers will not prompt a re-render when dispatching actions

Stylish elements within a higher-order component in a React application

Transforming an object's type into an array of different types

How can the `!` operator be utilized in MikroORM Typescript entities?

What is the best way to retrieve an array of model objects utilizing a resolver?

Can the garbage collector in Typescript/JavaScript effectively handle circular references, or does it result in memory leaks?

typescript/raven.d.ts, at line 205, is throwing an error stating that it cannot recognize the name 'unknown' when attempting to install npm in an Ionic

Oops! Looks like an issue has popped up: using require() of an ES module is not supported when using recharts in combination with next.js

What sets property binding with methods in Angular apart from using @Output() and EventEmitter?

Extracting arrays from JSON in Angular: A step-by-step guide