我有一个容器,里面有一个元素。我希望能够将元素拖动到容器内的另一个位置,并查看新的x和y坐标(其中x = 0和y = 0是容器的左上角)。
我在https://stackblitz.com/edit/material-6-mjrhg1设置了一个基本的stackblitz,但是它不会在控制台中显示整个事件对象(“对象太大”)。在我的实际应用程序中,我可以浏览整个事件对象,但是找不到描述新的x和y位置的任何属性。
基本设置是这样:
<div style="height: 200px; width=200px; background-color: yellow" class="container">
<div
style="height: 20px; width: 20px; background-color: red; z-index: 10"
cdkDrag
cdkDragBoundary=".container"
(cdkDragEnded)="onDragEnded($event)">
</div>
</div>
我也尝试了其他一些事件,但是cdkDragEnded对我来说最有意义。
有什么想法要检查哪些属性以查找x和y坐标,还是应该使用其他事件/方法?
答案 0 :(得分:3)
您可以访问source
事件中从CdkDragEnd
属性中拖动的元素。
onDragEnded(event) {
let element = event.source.getRootElement();
let boundingClientRect = element.getBoundingClientRect();
let parentPosition = this.getPosition(element);
console.log('x: ' + (boundingClientRect.x - parentPosition.left), 'y: ' + (boundingClientRect.y - parentPosition.top));
}
getPosition(el) {
let x = 0;
let y = 0;
while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
x += el.offsetLeft - el.scrollLeft;
y += el.offsetTop - el.scrollTop;
el = el.offsetParent;
}
return { top: y, left: x };
}
我修改了堆叠闪电记号,以记录要移动的矩形here的x和y坐标。
要解决要移动的矩形包含在另一个元素中的问题,我们使用getPosition
函数(该函数取自this stackoverflow帖子)来检索的顶部/左侧值包含元素,这样我们就可以正确计算x / y坐标。