angular - cdkDragMoved 事件返回基于 clientX 和 clientY 而不是容器的指针位置

Question

我试图根据容器内的位置获取盒子的 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)
  }
}

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

Answer 1

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

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

Here is an example in StackBlitz .