要在Angular Material 7中获取拖放元素的x和y坐标,您可以使用Angular CDK的DragDrop模块。以下是一个示例解决方案,其中包含代码示例:
npm install @angular/cdk
npm install @angular/material
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
imports: [
DragDropModule
]
})
export class YourModule { }
import { Component } from '@angular/core';
import { CdkDragEnd } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
xCoord: number;
yCoord: number;
onDragEnded(event: CdkDragEnd) {
this.xCoord = event.source.getFreeDragPosition().x;
this.yCoord = event.source.getFreeDragPosition().y;
}
}
Draggable Element
X Coordinate: {{ xCoord }}
Y Coordinate: {{ yCoord }}
当您拖动可拖动元素时,onDragEnded方法会被触发,并且xCoord和yCoord变量会被更新为拖动元素的当前x和y坐标。您可以在模板中显示这些坐标以进行测试和验证。