Angular CDK拖拽元素因父元素translate3d偏移问题求助

针对父元素带transform: translate3d()导致的CDK拖拽偏移，有以下几个简便方案：

方案1：指定拖拽根元素到不受transform影响的容器 #

CDK默认会把拖拽辅助元素挂载到触发拖拽的元素父链中，可通过cdkDragRootElement强制将其挂载到不受transform影响的容器（比如body），让position: fixed的包含块恢复为整个文档，避免计算错误。

在可拖拽元素上添加属性：

<div cdkDrag [cdkDragRootElement]="'body'">
  <!-- 拖拽内容 -->
</div>

方案2：利用拖拽事件修正偏移量 #

如果无法修改根元素，可以在拖拽开始时计算父元素的transform偏移值，拖拽过程中手动修正位置：

1. 在组件中定义方法获取父元素的transform偏移：

import { CdkDragStart, CdkDragMove } from '@angular/cdk/drag-drop';

private parentOffset = { x: 0, y: 0 };

private getParentTransformOffset(element: HTMLElement): { x: number, y: number } {
  const style = window.getComputedStyle(element);
  const transform = style.getPropertyValue('transform');
  if (transform === 'none') return { x: 0, y: 0 };
  
  const matrix = new DOMMatrix(transform);
  return { x: matrix.e, y: matrix.f };
}

2. 绑定拖拽事件：

<div cdkDrag (cdkDragStarted)="dragStarted($event)" (cdkDragMoved)="dragMoved($event)">
  <!-- 拖拽内容 -->
</div>

3. 实现事件处理逻辑：

dragStarted(event: CdkDragStart) {
  const parentEl = event.source.element.nativeElement.parentElement as HTMLElement;
  this.parentOffset = this.getParentTransformOffset(parentEl);
}

dragMoved(event: CdkDragMove) {
  const dragRef = event.source._dragRef;
  const correctedX = event.pointerPosition.x - event.source._initialDragPosition.x - this.parentOffset.x;
  const correctedY = event.pointerPosition.y - event.source._initialDragPosition.y - this.parentOffset.y;
  
  dragRef.reset({ x: correctedX, y: correctedY });
}

注意：这里用到了CDK的私有属性（_dragRef、_initialDragPosition），在15.2.4版本稳定可用，但升级Angular时需注意兼容性。

方案3：临时移除父元素transform（若允许） #

如果外部库的父元素transform可临时移除（比如拖拽期间），可以在拖拽开始时移除transform，结束后恢复：

private originalTransform = '';

dragStarted(event: CdkDragStart) {
  const parentEl = event.source.element.nativeElement.parentElement as HTMLElement;
  this.originalTransform = parentEl.style.transform;
  parentEl.style.transform = 'none';
}

dragEnded(event: CdkDragEnd) {
  const parentEl = event.source.element.nativeElement.parentElement as HTMLElement;
  parentEl.style.transform = this.originalTransform;
}

该方案仅适用于父元素transform不影响其他功能的场景，若外部库依赖这个transform则不适用。

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