要保持原始位置,您可以使用Angular CDK拖放的dragStart
和dragEnd
事件。在dragStart
事件中,您可以记录元素的原始位置,然后在dragEnd
事件中将元素恢复到原始位置。
以下是一个示例:
Drag me
import { Component, ViewChild, ElementRef } from '@angular/core';
import { CdkDragStart, CdkDragEnd } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-drag-drop-example',
templateUrl: './drag-drop-example.component.html',
styleUrls: ['./drag-drop-example.component.css']
})
export class DragDropExampleComponent {
@ViewChild('dragElement') dragElement: ElementRef;
originalPosition: { x: number, y: number };
onDragStart(event: CdkDragStart) {
// 记录元素的原始位置
const elementRect = this.dragElement.nativeElement.getBoundingClientRect();
this.originalPosition = { x: elementRect.left, y: elementRect.top };
}
onDragEnd(event: CdkDragEnd) {
// 将元素恢复到原始位置
this.dragElement.nativeElement.style.transform = `translate(${this.originalPosition.x}px, ${this.originalPosition.y}px)`;
}
}
在上面的示例中,我们使用@ViewChild
装饰器获取拖放元素的引用。在onDragStart
事件处理程序中,我们使用getBoundingClientRect
方法获取元素的位置,并将其保存在originalPosition
变量中。在onDragEnd
事件处理程序中,我们将元素的transform
样式设置为原始位置,以将元素恢复到原始位置。
请注意,您需要将@ViewChild
装饰器的参数设置为拖放元素的选择器,以获取对该元素的引用。