Angular CDK drag and copy behaviour problem

Question

I have two lists, S(ource), D(estination). When the dragged item of S entering D, the item immediately disappear from S, and appear in D.

S:

<mat-list id="s" cdkDropListConnectedTo="d" cdkDropList>
  <mat-list-item cdkDrag [cdkDragData]='data' *ngFor="let data of sElements">
   {{data}}
  </mat-list-item>
</mat-list>

...

D:

<mat-list id="d" cdkDropListConnectedTo="s" cdkDropList (cdkDropListDropped)="drop($event)">
  <mat-list-item *ngFor="let data of dElements">
   {{data}}
  </mat-list-item>
</mat-list>

https://stackblitz.com/edit/angular-jtlwmk

I want to prevent dissapearing the item in list S, but make it simultaneously visible in both S and D lists.

ps.: drop($event) function can handle copy behaviour, after the item dropped, so it is available int both lists. The problem is that the item disappear between cdkDropListEntered and cdkDropListDropped events

ps2.: As i couldn't find any solutions i tried some workaround: 1. on D's cdkDropListEntered event handler i duplicated the item in S 2. on D's cdkDropListExited event handler i removed duplicated item from S

This solution works 99% properly but when the customer drag the mouse fast and furious CDK throws exception.

In stackblitz it fails 100%: https://stackblitz.com/edit/angular-xpmxlx

Denis Denis · Accepted Answer · 2020-02-22T05:51:16

Inject a change detector into your constructor

constructor(private changeDetectorRef: ChangeDetectorRef) { }

Then when you modify your lists in dropListEntered and dropListExited call:

this.changeDetectorRef.detectChanges();

Angular CDK drag and copy behaviour problem

1 Answers