Search code examples
angulartypescriptdrag-and-dropangular-cdk

Drag-Drop list transfer between components by dropping on navigation label of destination component

I'm trying to figure out how to drop an element from one list onto a <div> and have that item change lists.

The goal is to be able to drop items from one list onto the labels in a sidebar navigation and have the item be switched to the list on that destination page.

I've attempted implementing a very simple proof of concept on stackblitz, but to no avail.

Is it possible to drop an item to a given div (even one that doesn't display a list) and have that item switch lists?

Here's the link to the stackblitz: https://stackblitz.com/edit/angular-special-drop-zone

In the stackblitz, I'm trying to be able to drop items from the TODO list onto the DONE header and have them added to the DONE list.

EDIT: Here's a GIF of what I'm trying to accomplish. Upon dropping onto 'Backlog' in the side nav, I want it to switch to the backlog list.

enter image description here

Solution

  • TL;DR:

    Add all the cdkDrop* attributes to the div you want to be able to drop on, just don't render the list. Make sure it shares the same cdkDropListdata property that the visible list does. See stackblitz links for examples.

    I've found 2 ways to solve this problem. Both require treating the drop zone <div> as an independent cdkDropList.

    1. Using cdkDropListConnectedTo

    Documentation: https://stackblitz.com/edit/ng-cdkdroplistgroup

    Stackblitz:CdkDropListConnectedTo Example

    Connect the origin list to the invisible 'drop' list (that's just a div/label), using cdkDropListConnectedTo.

    2. Using cdkDropListGroup

    See Documentation

    Stackblitz: CdkDropListGroup Example

    Use the cdkDropListGroup directive on a div that contains all the lists that you want to be able to drag/drop between. They will be automatically connected as if you had used cdkDropListConnectedTo on each of them, with all their unique names.

    To be able to drop on a label and have it end up in a list, follow the same process as above by having the visible list and the label share the same cdkDropListdata property.

    In some cases this isn't possible as the label and the visible list might be in different components and getting their data from a data service or observable. In this case, you'll want to handle the drop event, and update the lists yourself instead of just using transferArrayItem(). If the components have subscribed to changes, the behavior will be the same.