import {Directive, ElementRef, HostListener, Input, OnInit} from '@angular/core';
@Directive({
selector: '[seat-dragger]'
})
export class SeatmapDraggerDirective implements OnInit {
private topStart: number;
private leftStart: number;
private _allowDrag: boolean = true;
private md: boolean;
private _handle: HTMLElement;
constructor(public element: ElementRef) {
}
ngOnInit() {
// css changes
if (this._allowDrag) {
this.element.nativeElement.style.position = 'relative';
this.element.nativeElement.className += ' cursor-draggable';
}
}
@HostListener('mousedown', ['$event'])
onMouseDown(event: MouseEvent) {
this.md = true;
this.topStart = event.clientY - this.element.nativeElement.style.top.replace('px', '');
this.leftStart = event.clientX - this.element.nativeElement.style.left.re
Angular拖拽指令
最新推荐文章于 2024-08-29 08:13:15 发布
本文详细介绍了如何在Angular应用中实现拖拽和放置(drop)功能,通过使用内置的CDK DragDrop模块,创建自定义拖拽指令,实现元素的动态拖放操作,提升用户体验。
摘要由CSDN通过智能技术生成