查找另一个div内div的相对位置（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内的特定位置
2. 拖曳-获取新的坐标

问题：当我以编程方式重新放置盒子然后四处移动时，x，y值变为负数–

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS84UHJRVi5wbmcifQ==” alt =“ **在此处检查图像**”>

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>

打字稿：

 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 change指示original position。

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

因此，如果可以获取元素的原始位置，则可以将转换值添加到原始位置值以获取当前位置。

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

dragEnd(event: CdkDragEnd) {
  const element = event.source.element.nativeElement;
  const transform = element.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