如何移除可拖拽元素的transform样式并替换为left/top定位？

核心思路 #

监听拖拽元素的位置变化，将Angular CDK默认的transform: translate3d()定位转换为基于父容器的left/top百分比定位，生成不可拖拽的预览元素。

1. 更新TypeScript组件代码 #

import { Component, ViewChild, ElementRef, Renderer2 } from '@angular/core';
import { CdkDrag, DragRef } from '@angular/cdk/drag-drop';

@Component({
  selector: 'cdk-drag-drop-boundary-example',
  templateUrl: 'cdk-drag-drop-boundary-example.html',
  styleUrls: ['cdk-drag-drop-boundary-example.css'],
  standalone: true,
  imports: [CdkDrag],
})
export class CdkDragDropBoundaryExample {
  @ViewChild('dragBox') dragBox!: ElementRef<HTMLDivElement>;
  @ViewChild(CdkDrag) cdkDrag!: CdkDrag;
  private dragRef!: DragRef;
  private currentPosition = { x: 0, y: 0 };

  constructor(private renderer: Renderer2) {}

  ngAfterViewInit() {
    // 获取拖拽实例，监听拖拽结束事件记录位置
    this.dragRef = this.cdkDrag.dragRef;
    this.dragRef.ended.subscribe(() => {
      const transform = this.dragBox.nativeElement.style.transform;
      // 解析translate3d的数值
      const match = transform.match(/translate3d\((\d+)px, (\d+)px, 0px\)/);
      if (match) {
        this.currentPosition.x = parseInt(match[1], 10);
        this.currentPosition.y = parseInt(match[2], 10);
      }
    });
  }

  openPreview() {
    const boundary = this.dragBox.nativeElement.parentElement;
    if (!boundary) return;

    // 创建预览元素
    const previewBox = this.renderer.createElement('div');
    this.renderer.addClass(previewBox, 'example-box');
    this.renderer.setProperty(previewBox, 'textContent', 'Now I can\'t be dragged, sorry');

    // 计算相对于父容器的百分比
    const boundaryRect = boundary.getBoundingClientRect();
    const leftPercent = (this.currentPosition.x / boundaryRect.width) * 100;
    const topPercent = (this.currentPosition.y / boundaryRect.height) * 100;

    // 设置定位样式
    this.renderer.setStyle(previewBox, 'left', `${leftPercent.toFixed(2)}%`);
    this.renderer.setStyle(previewBox, 'top', `${topPercent.toFixed(2)}%`);
    this.renderer.setStyle(previewBox, 'position', 'absolute');

    // 替换原有拖拽元素为预览元素
    this.renderer.removeChild(boundary, this.dragBox.nativeElement);
    this.renderer.appendChild(boundary, previewBox);
  }
}

2. 更新HTML模板 #

<div class="example-boundary">
  <div #dragBox class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>

<button (click)="openPreview()">Preview the dragged element</button>

3. 调整CSS样式 #

确保父容器为相对定位，让预览元素的绝对定位生效：

.example-boundary {
  position: relative;
  width: 400px;
  height: 400px;
  border: dotted 2px #ccc;
}

.example-box {
  width: 100px;
  height: 100px;
  background: #fff;
  border: solid 1px #ccc;
  padding: 10px;
  cursor: move;
}

关键细节说明 #

• 拖拽结束时通过正则解析transform属性的translate3d值，记录元素偏移量
• 基于父容器宽高计算百分比，确保预览位置与拖拽位置完全匹配
• 使用Angular官方的Renderer2操作DOM，避免原生DOM操作的风险
• 预览元素未添加cdkDrag相关指令，天然不可拖拽

内容的提问来源于stack exchange，提问作者The Dead Man