Angular CDK Drag Drop Absolutely Position Elements Without Jumping

Question

I'm trying to use the Angular Drag/Drop from the CDK to implement a basic sidebar with draggable elements where the user can drop them anywhere in the "content" area. Meaning, the elements should ultimately be absolutely positioned and should be able to live wherever the user wants them, including on top of each other.

I'm trying to use cdkDropListConnectedTo with a cdkDropList. I have it mostly working here, but you can see that when dragging multiple items onto the content area, the previous items jump around. I want the user to be able to drag and drop as many items on the content area as they want, and they should be able to be dropped wherever they please without affecting the other elements.

It seems like some simple CSS would be able to fix this, but now I'm wondering if this is not the right way to go about making this happen.

Updated gif after adding cdkDropListSortingDisabled="true"

Answer 1

just include cdkDropListSortingDisabled="true" in your cdkDropList #dropZone

  <div 
      id="page-0" 
      class="document-page dropZone"
      #dropZone 
      cdkDropList 
      id="drop-list"
      cdkDropListSortingDisabled="true"   //<----HERE
      (cdkDropListDropped)="itemDropped($event)"
    >

Update In drop try:

itemDropped(event: CdkDragDrop<any[]>) {
     const rect=event.item.element.nativeElement.getBoundingClientRect()
      event.item.data.top=(rect.top+event.distance.y-this.dropZone.nativeElement.getBoundingClientRect().top)+'px'
      event.item.data.left=(rect.left+event.distance.x-this.dropZone.nativeElement.getBoundingClientRect().left)+'px'
      this.addField({...event.item.data}, event.currentIndex);
  }