我正在准备一个允许用户设计身份证的网络应用。
我正在使用 ng-drag-drop
https://www.npmjs.com/package/ng-drag-drop
。
我希望在更大的 div
框内获取 div
框的坐标。
根据图像,我想要 (x,y)
相对于 outer div
要实现的目标:
- 将内部div放在div内的特定位置
- 四处拖动——获取新坐标
问题:当我以编程方式重新定位盒子然后四处移动时,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;
}
最佳答案
当使用 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
关于javascript - 在另一个 div 中查找 div 的相对位置(ng-drag-drop),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58516653/