Question

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

使用诸如ondragenter之类的HTML5原生拖放方法无法响应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"或记录其已输入，已删除或已退出删除列表的记录。

Answer 1

最终，执行此操作的最佳方法是在cdkDropList中包围cdkDrop元素，并在cdkDropListGroups中包围两个cdkDropList。虽然这可能不适用于每种数据模型，但总的想法仍然存在。

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

如何使用Angular 8 CDK拖放功能拖动以合并两张卡？

1 个答案: