如何将movable-div定位到child-div相对于parent1-div的坐标位置？

我来帮你搞定这个相对坐标计算的问题！要获取child-div相对于parent1-div的位置，我们可以借助DOM的位置API来实现，具体步骤如下：

1. 添加模板引用变量 #

首先在模板里给目标容器和子元素加上模板引用变量，这样我们能在组件类里直接获取它们的DOM元素：

<div class="parent1-div" #parent1>
  <div class="parent2-div">
    <div class="child-div" #child>
      <a (click)="anchorClickEvent($event)"></a>
    </div>
  </div>
</div>

<div class="movable-div" [ngStyle]="{'left': xPosition, 'top': yPosition}">
  This div contains some crazy animation
</div>

2. 获取DOM元素引用并修改点击逻辑 #

在组件类中，使用ViewChild获取模板引用对应的元素，然后修改点击事件的坐标计算逻辑：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  // 你的组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  xPosition!: string;
  yPosition!: string;
  somePx = 10; // 替换成你实际需要的偏移值

  @ViewChild('parent1') parent1Div!: ElementRef<HTMLDivElement>;
  @ViewChild('child') childDiv!: ElementRef<HTMLDivElement>;

  anchorClickEvent(event: Event){
    // 获取子元素和父容器相对于视口的位置信息
    const childRect = this.childDiv.nativeElement.getBoundingClientRect();
    const parent1Rect = this.parent1Div.nativeElement.getBoundingClientRect();

    // 计算child-div相对于parent1-div的坐标
    let relativeX = childRect.left - parent1Rect.left;
    let relativeY = childRect.top - parent1Rect.top;

    // 如果parent1-div有边框，需要减去边框宽度（可选，无边框可省略）
    relativeX -= this.parent1Div.nativeElement.clientLeft;
    relativeY -= this.parent1Div.nativeElement.clientTop;

    // 应用偏移值并设置movable-div的位置
    this.xPosition = `${relativeX - this.somePx}px`;
    this.yPosition = `${relativeY - this.somePx}px`;
  }
}

关键说明 #

• getBoundingClientRect()：该方法返回元素相对于浏览器视口的位置和尺寸信息，通过子元素与父容器的位置差值，就能得到子元素在父容器内的相对坐标。
• clientLeft/clientTop：如果parent1-div设置了边框，这两个属性可以获取边框的宽度，减去它们能让坐标计算更精准（父容器无边框时可忽略这一步）。
• 点击事件触发时DOM已经渲染完成，不用担心元素未加载导致的获取失败问题。

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