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

【问题标题】：Angular CDK Drag Drop Absolutely Position Elements Without JumpingAngular CDK 拖放绝对定位元素而不跳跃
【发布时间】：2020-01-29 15:54:29
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular drag-and-drop angular-cdk

【解决方案1】：

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

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

更新在drop尝试：

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

【讨论】：

感谢 Eliseo - 这似乎有点帮助，但是当你删除一个元素时，它似乎仍然尊重 DOM 中的其他元素位置。我用另一个显示问题的 gif 更新了原始帖子（以及基于您的评论的 Stackblitz）。再次感谢您的建议。
正在尝试我认为我得到了解决方案，请参阅更新的答案（对不起，我急于检查）
就是这样。看来我的计算错了。谢谢！
@randyjensen 你介意再次分享 stackblitz 链接吗？链接现在已断开。如果您提供链接会很好，因为我有与您相同的要求，也许它会帮助未来的开发人员。谢谢。 ?
@AlvinYanson，这个是：stackblitz.com/edit/angular-e4k1cd 吗？（来自这个 SO：stackoverflow.com/questions/59881107/…）