Angular CDK Drag Drop абсолютно позиционирует элементы без прыжков

Question

Я пытаюсь использовать перетаскивание Angular из CDK для реализации базовой c боковой панели с перетаскиваемыми элементами, где пользователь может перетаскивать их где угодно в области «содержимого». Это означает, что элементы в конечном итоге должны быть абсолютно позиционированы и должны иметь возможность жить там, где их хотят пользователи, в том числе друг над другом.

Я пытаюсь использовать cdkDropListConnectedTo с cdkDropList. У меня это в основном работает здесь , но вы можете видеть, что при перетаскивании нескольких элементов в область содержимого предыдущие элементы перепрыгивают. Я хочу, чтобы пользователь мог перетаскивать столько элементов в области содержимого, сколько он хочет, и его можно было бы удалять, где ему угодно, без влияния на другие элементы.

Кажется, что какой-то простой CSS мог бы это исправить, но теперь мне интересно, если это не правильный путь к go о том, чтобы это произошло.

Обновлен gif после добавления cdkDropListSortingDisabled = "true"

Answer 1

просто включите cdkDropListSortingDisabled="true" в ваш cdkDropList # dropZone

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

Обновление В пробной версии:

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);
  }