I am currently trying to drag one card on top of another card in order to "merge" or "combine" them, in the same way one might when they drag an image on their desktop into a folder.
Using HTML5 native drag and drop methods such as ondragenter do not respond with Angular's drag and drop features. I have already tried surrounding the card in a div that is a cdkDropList and use (cdkDropListDropped) in the div in order to detect when a card is in the other card to no avail.
<div class="merge-area" cdkDropList [cdkDropListData]="done" (cdkDropListDropped)="drop($event)">
<mat-card class="cards"
cdkDrag
(cdkDragStarted)="dragStarted()"
(cdkDragEnded)="dragEnded()"
*ngFor="let item of done">{{item}}</mat-card>
</div>
Other cards do not move into the "merge area" or log that they have entered, been dropped, or exited the drop list.