cdkDragMoved 事件返回pointerPosition 基于clientX 和clientY 而不是容器答案

【问题标题】：cdkDragMoved event returns pointerPosition based on clientX and clientY instead of containercdkDragMoved 事件返回pointerPosition 基于clientX 和clientY 而不是容器
【发布时间】：2019-04-29 15:31:37
【问题描述】：

我正在尝试根据容器内的位置获取框的 x 和 y 位置。 Here's 来自https://material.angular.io 的示例。

我目前有this 小演示来检查cdkDragMoved 事件的输出。

<div class="something">
  <div class="example-box" cdkDrag cdkDragBoundary=".something" (cdkDragMoved)="test($event)" (cdkDragEnded)="test($event)" (cdkDragReleased)="test($event)">
    Drag me around
  </div>
</div>

export class CdkDragDropOverviewExample {
  test(e) {
    console.log(e)
  }
}

我想要的输出是相对于父级的位置，以像素或百分比表示。

【问题讨论】：

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

【解决方案1】：

可能有更优雅的方法，但我是这样做的。

使用@ViewChild，为父元素和被拖动的项目获取ElementRef。由此，我们可以访问nativeElement 来获取对 DOM 元素的引用
从指针位置（来自onDragMoved 事件）减去被拖动项目的左上角（可以通过在元素上调用getBoundingClientRect() 找到），找出被拖动项目的左上角)
也使用相同的技术找出父元素的左上角
使用上面的两个值，你可以推断出被拖动元素相对于父元素的位置，以像素为单位，取pointer position - distance from corner of dragged element - position of the parent element relative to the page

Here is an example in StackBlitz.

【讨论】：