Angular CDK Drag获取拖拽元素相对容器的位置问题

我来帮你搞定这个需求！你说得没错，Angular CDK的cdkDragMoved事件返回的pointerPosition确实是基于浏览器视口的clientX/clientY，要拿到相对于父容器的坐标，我们可以手动计算出来，步骤很简单：

步骤1：给父容器添加模板引用 #

先在模板里给你的.something容器加个模板引用变量，方便后续获取它的位置信息：

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

步骤2：在组件中获取容器元素并计算相对坐标 #

在组件类里，用ViewChild获取容器元素，然后在事件处理方法中计算相对于容器的坐标：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { CdkDragMove, CdkDragEnd, CdkDragRelease } from '@angular/cdk/drag-drop';

export class CdkDragDropOverviewExample {
  @ViewChild('container') container!: ElementRef<HTMLDivElement>;

  test(e: CdkDragMove | CdkDragEnd | CdkDragRelease) {
    // 只在拖拽移动时计算坐标，避免其他事件重复计算
    if ('pointerPosition' in e) {
      const containerRect = this.container.nativeElement.getBoundingClientRect();
      // 计算相对于容器的像素坐标（基于视口位置差）
      const relativeX = e.pointerPosition.x - containerRect.left;
      const relativeY = e.pointerPosition.y - containerRect.top;

      // 如果需要百分比坐标，可以这样计算
      const relativeXPercent = (relativeX / containerRect.width) * 100;
      const relativeYPercent = (relativeY / containerRect.height) * 100;

      console.log('相对容器像素坐标：', { x: relativeX, y: relativeY });
      console.log('相对容器百分比坐标：', { x: relativeXPercent.toFixed(2) + '%', y: relativeYPercent.toFixed(2) + '%' });
    }
  }
}

额外说明 #

• 如果你的父容器有padding，而你想要的是相对于内容区的坐标，那需要把容器的内边距也减去：

  const containerStyle = getComputedStyle(this.container.nativeElement);
  const paddingLeft = parseInt(containerStyle.paddingLeft, 10);
  const paddingTop = parseInt(containerStyle.paddingTop, 10);
  const relativeX = e.pointerPosition.x - containerRect.left - paddingLeft;
  const relativeY = e.pointerPosition.y - containerRect.top - paddingTop;
  

• cdkDragEnded和cdkDragReleased事件也可以用同样的方式计算，不过注意只有CdkDragMove类型的事件才有pointerPosition，所以我们加了类型判断避免报错。

这样应该就完美满足你的需求啦！

内容的提问来源于stack exchange，提问作者servinlp