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

Question

我正在准备一个 web 应用程序，它允许用户设计身份证。

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

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

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

要实现的事情：

1. 将内部 div 放在 div 内部的特定 position
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 变换更改元素的 position 时，变换的值表示position change从其original position FE07FDD4983ADBBE0EAZ6 更改。

Also when an element is moved using transform, its' original position will never change, as the new position should always be calculated from original position + change in position .

所以如果你能得到元素的原始position，你可以将变换值加上原始的position值得到当前的position。

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

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 offsetParent = 'closest positioned parent' || document.body