Angular CDK 拖放绝对定位元素而不跳跃

Question

我正在尝试使用 CDK 中的 Angular Drag/Drop 来实现带有可拖动元素的基本侧边栏，用户可以将它们放在 "content" 区域的任何位置。这意味着，元素最终应该是绝对定位的，并且应该能够存在于用户想要的任何位置，包括彼此叠加。

我正在尝试将 cdkDropListConnectedTo 与 cdkDropList 一起使用。我大部分时间都在使用它 here，但您可以看到，将多个项目拖到内容区域时，之前的项目会跳来跳去。我希望用户能够根据需要在内容区域中拖放任意数量的项目，并且应该能够将它们放到他们喜欢的任何地方而不影响其他元素。

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

添加 cdkDropListSortingDisabled 后更新了 gif="true"

Answer 1

只需在您的 cdkDropList 中包含 cdkDropListSortingDisabled="true" #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);
  }

Angular CDK 拖放绝对定位元素而不跳跃

Angular CDK Drag Drop Absolutely Position Elements Without Jumping

drag-and-drop

angular

angular-cdk