Drag drop with @angular/cdk gives wrong event data for drop

Question

I have looked around the @angular/cdk examples for drag-drop and almost all of them are for sorting lists and dragging an item across different lists.

I am trying to implement a file-folder kind of behavior where you have a list of items (each item designated as either a file or a folder) and you can drag one or more file item(s) of the list and drop onto a folder item in the same list... and it moves into it (handled by API calls, of course).

So, the regular sorting implementation will not work (items in a sortable list move out of the way when hovered).

I went through some questions on SO and understood that each item needs to be marked as cdkDropList. So, this is my implementation so far:

<div *ngFor="let item of items"
  cdkDropList
  [cdkDropListData]="[item]"
  (cdkDropListDropped)="onDrop($event, item)"
>
  <div class="test" cdkDrag>[{{item.type}}] {{item.name}}</div>
</div>

However, the event data only has information about the item being dragged (file item). In the code below, event.previousContainer.data, event.container.data and item all refer to the same object - the file item being dropped.

onDrop(event: any, item: ItemData) {
  console.log('drop event = ', event);
  console.log('event.previousContainer.data = ', event.previousContainer.data);
  console.log('event.container.data = ', event.container.data);
}

Can anyone please tell me what exactly is wrong here? Thanks.

Edit: Here's a reproduction in stackblitz: https://stackblitz.com/edit/angular-ivy-edaftg

Drag drop with @angular/cdk gives wrong event data for drop

0 Answers0