How to Implement Cloning, Auto-Arrangement, and Realignment of Drag-and-Drop Images in Angular CDK?

Question

I am working on a drag-and-drop exercise in Angular. When I drag an image, it should be cloned. When I drop it into the designated container, it should be fixed to that container. If I place the image in the wrong container, it should be redirected to its original position. I should be able to drop multiple images into the same container, and they should automatically arrange one by one. If I remove an image from the middle, the remaining images should automatically realign. How can I handle this using Angular CDK?

Here is our code:

<---HTML----->


<div class="drop-container">

  <div cdkDropList
       #doneList="cdkDropList"
       [cdkDropListData]="done"
       class="drop-list rec"
       (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of done" cdkDrag><img [src]="item" /></div>
  </div>
</div>


<div class="drag-container"> 

  <div cdkDropList
       [cdkDropListData]="todo"
       [cdkDropListConnectedTo]="[doneList]"
       [cdkDropListSortingDisabled]="true"
       class="drag-list"
       (cdkDropListEntered)="entered($event)"
       (cdkDropListExited)="exited($event)"
       [ngClass]="{'drag-stop': count === 1}">
    <ng-container *ngFor="let item of todo">
     
        <img [src]="item" cdkDrag [cdkDragData]="item" />
       
     
      <div class="example-box" >
        <img [src]="item" *ngIf="transferringItem === item"/>

      </div>
    </ng-container>
  </div>
</div>

<---Typescript--->

import { Component } from "@angular/core";
import { CdkDragDrop, copyArrayItem, CdkDragExit, CdkDragEnter } from "@angular/cdk/drag-drop";


@Component({
  selector: 'app-halsband',
  templateUrl: './halsband.component.html',
  styleUrl: './halsband.component.css'
})
export class HalsbandComponent {
  todo:string[] = ['assets/Images/images/Tiobas_b3.png'];

  done: string[] = [''];

  transferringItem: string = '';

  count: number = 0;
  

  drop(event: CdkDragDrop<string[]>) {
    this.count++;
    if (event.previousContainer.id !== event.container.id) {
      copyArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    }

    this.transferringItem = '';
   
  }

  entered(e: CdkDragEnter<any>) {
    this.transferringItem = '';
  }

  exited(e: CdkDragExit<any>) {
    console.log(e.item.data);
    this.transferringItem = e.item.data;
  }
}
  

<-----CSS----->

.drop-container {
  display: flex;
  justify-content: center;
  width: 100%; 
}

.drop-list {
  border: solid 1px #ccc; 
  background: white;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  width: 15vw;
  height: 15vw;
}

.drag-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top:2vw;
}


.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: white;
  font-size: 14px;
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.rec .cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
  border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.drag-stop {
  opacity: 0.3;
  pointer-events: none;
}