Как я могу использовать функцию перетаскивания Angular 8 CDK, чтобы объединить две карты?

Question

В настоящее время я пытаюсь перетащить одну карту поверх другой карты, чтобы «объединить» или «объединить» их, так же, как можно было бы перетаскивать изображение на рабочем столе в папку.

Использование собственных методов перетаскивания в HTML5, таких как ondragenter, не отвечает функциям перетаскивания в Angular.Я уже пытался окружить карту в div, который является cdkDropList, и использовать (cdkDropListDropped) в div, чтобы определить, когда карта находится в другой карте, но безрезультатно.

<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>

Другие карты делаютне перемещаться в "merge area" или журнал, в который они вошли, были удалены или покинули выпадающий список.

Answer 1

В конечном счете, лучший способ сделать это - заключить элемент cdkDrop в cdkDropList и окружить оба cdkDropLists в cdkDropListGroups. Хотя это может не работать для каждой модели данных, общая идея остается в силе.

Пример Stackblitz : https://stackblitz.com/edit/angular-51sw6c?file=app%2Fcdk-drag-drop-overview-example.html