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

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()来找到））找出要拖动的物体的左上角。 1}}事件）
3. 也使用相同的方法找出父元素的左上角
4. 使用上述两个值，您可以采用onDragMoved
来推断被拖动元素相对于父元素的位置（以像素为单位）

Here is an example in StackBlitz。