Angular cdkDragStarted中源元素rect.x为大负数的原因及解决方法

拖拽div时尝试通过mouse.x - div.x计算鼠标偏移量，但调用getBoundingClientRect()获取到的rect.x是类似-15984的超大负数，以下是问题原因和解决办法：

问题代码 #

HTML模板

@for (comp of components; track comp) {
<div #componentContainer class="component-container" (cdkDragStarted)="beforeDrag($event)" cdkDrag cdkDropList [cdkDropListConnectedTo]="container">
  <div class="component-wapper">
    <div class="component-name"> {{comp.name}}</div>
    <img class="component-avatar" src="{{comp.src}}" />
  </div>
</div>
}

TypeScript代码

var rect = e.source.element.nativeElement.getBoundingClientRect();
console.log(rect.x)

问题原因 #

• CDK Drag克隆元素干扰：Angular CDK Drag在拖拽启动时，会自动创建拖拽元素的克隆体（用于overlay层显示拖拽预览），你当前获取的e.source.element.nativeElement指向的是这个克隆元素，而非原始DOM节点。克隆元素初始位置默认在视口外，因此rect.x会出现超大负数。
• 指令混用导致逻辑冲突：单个div同时绑定cdkDrag（可拖拽元素）和cdkDropList（可放置容器）不符合设计逻辑，会导致CDK内部定位逻辑混乱，错误计算元素位置。

解决办法 #

1. 拆分CDK指令的使用

将cdkDrag和cdkDropList分别绑定到不同层级的元素，外层作为放置容器，内层作为可拖拽元素：

@for (comp of components; track comp) {
  <div class="drop-container" cdkDropList [cdkDropListConnectedTo]="container">
    <div #componentContainer class="component-container" (cdkDragStarted)="beforeDrag($event)" cdkDrag>
      <div class="component-wapper">
        <div class="component-name"> {{comp.name}}</div>
        <img class="component-avatar" src="{{comp.src}}" />
      </div>
    </div>
  </div>
}

2. 获取原始DOM元素的位置

通过CDK Drag的内部引用获取原始拖拽元素，而非克隆体：

beforeDrag(e: CdkDragStart) {
  // 获取原始拖拽元素的位置
  const originalElement = e.source._dragRef.element.nativeElement;
  const rect = originalElement.getBoundingClientRect();
  console.log(rect.x);
}

或者通过模板引用变量结合@ViewChildren获取原始元素：

import { ViewChildren, ElementRef, QueryList } from '@angular/core';
import { CdkDragStart } from '@angular/cdk/drag-drop';

@ViewChildren('componentContainer') componentContainers!: QueryList<ElementRef>;

beforeDrag(e: CdkDragStart) {
  const targetContainer = this.componentContainers.find(container => 
    container.nativeElement === e.source._dragRef.element.nativeElement
  );
  if (targetContainer) {
    const rect = targetContainer.nativeElement.getBoundingClientRect();
    console.log(rect.x);
  }
}

3. 直接使用CDK提供的拖拽位置信息

无需手动计算元素位置，CDK已经在事件中提供了鼠标和拖拽元素的坐标：

beforeDrag(e: CdkDragStart) {
  // 鼠标当前的视口X坐标
  const mouseX = e.event.clientX;
  // 原始拖拽元素的视口X坐标
  const originalRect = e.source._dragRef.element.nativeElement.getBoundingClientRect();
  // 计算鼠标相对于元素的偏移量
  const offsetX = mouseX - originalRect.x;
  console.log('鼠标偏移量:', offsetX);
}

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