如何使用 Angular 8 CDK 拖放功能来拖放两张卡？答案

【问题标题】：How may I use the Angular 8 CDK drag and drop feature to drag to combine two cards?如何使用 Angular 8 CDK 拖放功能来拖放两张卡？
【发布时间】：2019-06-19 03:06:17
【问题描述】：

我目前正在尝试将一张卡拖到另一张卡上以“合并”或“组合”它们，就像他们将桌面上的图像拖到文件夹中一样。

使用 HTML5 原生拖放方法（例如 ondragenter）不会响应 Angular 的拖放功能。我已经尝试将卡片包围在 cdkDropList 的 div 中，并在 div 中使用 (cdkDropListDropped) 以检测卡片何时在另一张卡片中无济于事。

<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" 或记录它们已进入、被删除或退出删除列表。

【问题讨论】：

标签： angular angular-material

【解决方案1】：

最终，最好的方法是在 cdkDropList 中包围一个 cdkDrop 元素，并在 cdkDropListGroups 中包围这两个 cdkDropLists。虽然这可能不适用于所有数据模型，但总体思路是成立的。

Stackblitz 示例：https://stackblitz.com/edit/angular-51sw6c?file=app%2Fcdk-drag-drop-overview-example.html

【讨论】：