Angular 中的嵌套拖放：将一个列表的项目附加到悬停时其他列表项目的子项中

Question

我正在开发一个 Angular 项目，其中有一个嵌套的拖放场景。我有三个列表：L1、L2 和 L3，其中 L2 是 L1 的子级列表，L3 是 L2 的子级列表。

我正在使用 Angular CDK 进行拖放功能，并且在实现一项功能时面临着挑战，在该功能中，将 L2 项目悬停在 L1 项目上时，L2 项目应附加到悬停的 L1 的子列表中item 如果该 L1 项的子项存在。如果 L1 项目没有子项，我想显示错误警报。

<!-- L1 container -->
<div cdkDropList [cdkDropListData]="L1Items" (cdkDropListDropped)="onL1ItemDropped($event)">
    <div *ngFor="let l1Item of L1Items" cdkDrag (mouseenter)="onL1ItemHover(l1Item)">
        <!-- L1 content here -->
    </div>
</div>

<!-- L2 container -->
<div cdkDropList [cdkDropListData]="L2Items" (cdkDropListDropped)="onL2ItemDropped($event)">
    <div *ngFor="let l2Item of L2Items" cdkDrag (mouseenter)="onL2ItemHover(l2Item)">
        <!-- L2 content here -->
    </div>
</div>

Answer 1

尝试使用 cdkDropListConnectedTo 在列表之间删除项目

对于警报，您可以使用 cdkDragStart 事件

(cdkDragStart)="sendAlert"

sendAlert () {
  if (this.listN.length = 0) this.doSomething()
}