Nested Drag and Drop in Angular: Appending Item of one list into children of items of other list on Hover

Question

I'm working on an Angular project where I have a nested drag-and-drop scenario. I have three lists: L1, L2, and L3, where L2 is the list of children of L1, and L3 is the list of children of L2.

I'm using Angular CDK for drag-and-drop functionality, and I'm facing challenges implementing a feature where, upon hovering an L2 item over an L1 item, the L2 item should be appended to the children list of the hovered L1 item if the children of that L1 item exist. If the L1 item doesn't have children, I want to show an error alert.

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

Try use cdkDropListConnectedTo to drop items between lists

For alert you can use cdkDragStart event (cdkDragStart)="sendAlert"

sendAlert () {
  if (this.listN.length = 0) {
    this.stopDrag() // Method for stop user drag
    this.doSomething() // Method for show your alert message
  }

}