0

I am trying to do drag and drop in an angular application where I have 2 lists, one on the right and one on the left. Here is a crude visual

I need to be able to drag (and copy) items from the left group to lists on the right which are separated by groups. In this case I am dragging the list item.

I also need to be able to reorder the list items within their groups and switch them between groups on the right side. This much I have working.

WHAT I NEED is to be able to reorder the GROUPS that hold the list items.

I'm guessing I have this issue because I used cdkDropListGroup. It automatically connects any of the list groups and I cannot individually drag the items while still being able to grab the whole groups as a group. I tried refactoring to use the 

[cdkDropListConnectedTo]="list-one"

but because I am rendering an unpredictable amount of groups AND i need them to still be connected so that I can drag between the groups, it will not let me connect the lists by ID.

Am I just out of luck for essentially nesting WITHIN the cdkDropListGroup tag or is there a way to handle this I am not seeing?

Here is a question VERY similar to what I am asking... I would just comment on the answer that was given (which was inadequate in my case) but I do not have the reputation to comment.

Edric
  • 24,639
  • 13
  • 81
  • 91
Alexander Hardy
  • 53
  • 1
  • 5

1 Answers1

0

Be sure to use $event within (cdkDropListDropped). Essentially you can achieve the [cdkDropListConnectedTo]="list-one" by mapping the transferArrayItem between the two lists. As far as the unpredictable amount of groups as long as your $event is emitting for each list you should be fine with *ngFor implementation

TS: 

drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
          moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
          transferArrayItem(event.previousContainer.data,
                            event.container.data,
                            event.previousIndex,
                            event.currentIndex);
        }
      }

HTML:

<div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
ianhalfpenny
  • 147
  • 4
  • 15