角CDK拖动拖放绝对定位元素而不会跳转

Question

我正在尝试使用CDK中的“角度拖放”来实现带有可拖动元素的基本边栏，用户可以在其中将它们拖放到“内容”区域中的任何位置。意思是，这些元素最终应该绝对定位，并且应该能够生活在用户希望的任何位置，包括彼此重叠。

我正在尝试将cdkDropListConnectedTo与cdkDropList一起使用。我主要使用here，但是您可以看到将多个项目拖到内容区域时，先前的项目会跳来跳去。我希望用户能够在内容区域上拖放任意数量的项目，并且应该能够将它们随意放置在任意位置而不会影响其他元素。

似乎一些简单的CSS可以解决此问题，但是现在我想知道这是否不是实现此目标的正确方法。

添加cdkDropListSortingDisabled =“ true”后更新了gif

Answer 1

只需在您的cdkDropList #dropZone中包括cdkDropListSortingDisabled="true"

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