Angular CDK拖拽：获取元素在父容器内的落点X/Y坐标

你的代码存在两个核心问题：

• cdkDragEnded事件会在任何拖拽动作结束时触发，哪怕元素没成功放入右侧放置区，无法确保拿到的是有效落点数据
• 位置计算逻辑没有针对目标放置区做精准的相对坐标计算，依赖元素offsetParent的递归求和容易出现偏差

直接用cdkDropListDropped事件处理即可解决，这个事件仅在元素成功放入目标放置区时触发，且能拿到完整的拖拽上下文信息。

修改后的模板代码 #

<div style="display: flex">
  <div class="example-container">
    <h2>待办</h2>
    <div class="example-list" cdkDropList>
      <div
        class="example-box"
        *ngFor="let item of todo"
        cdkDrag
      >
        {{ item }}
      </div>
    </div>
  </div>

  <div class="drop-container">
    <h2>已完成</h2>
    <div
      #dropZone
      class="dropzone"
      cdkDropList
      (cdkDropListDropped)="onDrop($event, dropZone)"
    ></div>
  </div>
</div>

修改后的TypeScript代码 #

import { CdkDragDrop } from '@angular/cdk/drag-drop';

// 组件其他逻辑...

onDrop(event: CdkDragDrop<any>, dropZone: HTMLElement) {
  // 获取放置区的视口位置信息
  const dropZoneRect = dropZone.getBoundingClientRect();
  // 获取拖拽元素的视口位置信息
  const dragElementRect = event.item.element.nativeElement.getBoundingClientRect();

  // 计算相对于放置区左上角的X/Y坐标
  const relativeX = dragElementRect.left - dropZoneRect.left;
  const relativeY = dragElementRect.top - dropZoneRect.top;

  // 如需获取元素中心点相对于放置区的坐标，可调整计算：
  // const centerRelativeX = relativeX + dragElementRect.width / 2;
  // const centerRelativeY = relativeY + dragElementRect.height / 2;

  console.log("元素相对于放置区的X坐标：", relativeX);
  console.log("元素相对于放置区的Y坐标：", relativeY);

  // 这里可添加元素放入后的业务逻辑，比如更新数据列表
  event.container.data.push(event.item.data);
}

核心逻辑说明 #

1. 依赖cdkDropListDropped事件确保只处理有效放置的场景
2. 通过模板引用变量#dropZone直接获取目标放置区的DOM元素，用getBoundingClientRect()拿到精准的视口位置
3. 计算拖拽元素与放置区的视口位置差值，得到相对放置区的精确落点坐标

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