angularangular-materialdrag-and-dropangular-cdkangular-cdk-drag-drop

Make a list of CdkDrag Angular element that don't move when a previous element is closed

Problem : I have an undefined list of popup windows (user can open as much as needed). Those windows can be moved on the app as CdkDrag element. Problem if we close one of the window, the following window(s) are moved on the screen by the same size of the closed window. Not the previously created window(s).

What I want : If I close one of the CdkDrag window, the other windows should NOT move.

I made a simplified demo here : https://stackblitz.com/edit/stackblitz-starters-bktmuk?file=package.json

And a video here : https://youtube.com/shorts/WdTsYX3nyFs

Thanks for your help

Solution

  • You have to move the for loop on the components, there should be only one single drop list.

    Then we need to move the cdkDrag directive on the for loop, since this is the element that is going to get dragged inside the list.

    We are going to absolute position the children so we need to set the draggable container as relative.

    <span CdkDropList style="position: relative;">
  <modal
    cdkDrag
    *ngFor="let item of modalListComponent; let i = index"
    (onClose)="onCloseEvent($event)"
    [guid]="item.guid"
  ></modal>
</span>

    On the child we set absolute positioning of the modal component.

    :host {
  position: absolute;
  left: 0px;
  top: 20px;
}

    Then finally we remove the directive and leave it as is.

    <div class="count-down-timer">
  This is a window
  <button shape="round" slot="end" (click)="onCloseEvent()">Close</button>
</div>

    Stackblitz Demo