javascript - 在另一个 div 中查找 div 的相对位置(ng-drag-drop)

Question

我正在准备一个允许用户设计身份证的网络应用。

我正在使用 ng-drag-drop https://www.npmjs.com/package/ng-drag-drop。

我希望在更大的 div 框内获取 div 框的坐标。

根据图像，我想要 (x,y) 相对于 outer div

要实现的目标:

1. 将内部div放在div内的特定位置
2. 四处拖动——获取新坐标

问题:当我以编程方式重新定位盒子然后四处移动时，x、y 值变为负值 –

HTML:

<div class="card-boundary" #boundary>
        <img width="1039" height="673" [ngStyle]="bgStyle" />
        <div cdkDragLockAxis="elem.dragLock" (cdkDragEnded)="dragEnd($event)" (cdkDragStarted)="onElemClick(elem,$event)" cdkDragBoundary=".card-boundary" cdkDrag *ngFor="let elem of elemList" [ngClass]="{'example-box-selected':(selectedElem && elem.field == selectedElem.field)}"
              (click)="onElemClick(elem,$event)" class="example-box" style="text-align: start" [ngStyle]="elem" #item>
             {{elem.sample}}
        </div>
</div>

typescript :

 dragEnd(event: CdkDragEnd) {
    const transform = event.source.element.nativeElement.style.transform;
    let regex = /translate3d\(\s?(?<x>[-]?\d*)px,\s?(?<y>[-]?\d*)px,\s?(?<z>[-]?\d*)px\)/;
    var values = regex.exec(transform);
    this.selectedElem.startX = +values[1];
    this.selectedElem.startY = +values[2];
  }

CSS:

.card-boundary {
    width: 1039px;
    height: 676px;
    max-width: 100%;
    position: relative;
    background-color: #fff
}

.bg-boundary {
    width: 1039px;
    height: 676px;
    max-width: 100%;
}

.example-box {
    cursor: move;
    position: relative;
    z-index: 1;
}

.example-box-selected {
    cursor: move;
    background: #eee;
    position: relative;
    z-index: 1;
}

Answer 1

当使用 css transform 更改元素的位置时，transform 的值表示相对于其原始位置的位置更改。

此外，当使用变换移动元素时，其原始位置永远不会改变，因为新位置应始终根据原始位置 + 位置变化计算。

所以如果你能得到元素的原始位置，你可以将变换值添加到原始位置值以获得当前位置。

下面的代码将为您提供元素相对于其“offsetParent”的当前位置。

dragEnd(event: CdkDragEnd) {
  const element = event.source.element.nativeElement;
  const transform = element.style.transform;
  let regex = /translate3d\(\s?(?<x>[-]?\d*)px,\s?(?<y>[-]?\d*)px,\s?(?<z>[-]?\d*)px\)/;
  var values = regex.exec(transform);
  this.selectedElem.startX = element.offsetLeft + +values[1];
  this.selectedElem.startY = element.offsetTop + +values[2];
}

PS: offsetParent = 'closest positioned parent' || document.body