1. 指令代码
import { Directive, ElementRef, OnInit, HostListener } from '@angular/core';
@Directive({
selector: '[appDrag]'
})
export class DragDirective implements OnInit {
constructor(public el: ElementRef) {
}
public isDown = false;
public disX; // 纪录鼠标点击事宜的位置 X
public disY; // 纪录鼠标点击事宜的位置 Y
private totalOffsetX = 0; // 纪录总偏移量 X轴
private totalOffsetY = 0; // 纪录总偏移量 Y轴
// 点击事宜
@HostListener('mousedown', ['$event']) onMousedown(event) {
this.isDown = true;
this.disX = event.clientX;
this.disY = event.clientY;
}
// 监听document挪动事宜事宜
@HostListener('document:mousemove', ['$event']) onMousemove(event) {
// 推断该元素是不是被点击了。
if (this.isDown) {
this.el.nativeElement.style.left = this.totalOffsetX + event.clientX - this.disX + 'px';
this.el.nativeElement.style.top = this.totalOffsetY + event.clientY - this.disY + 'px';
}
}
// 监听document脱离事宜
@HostListener('document:mouseup', ['$event']) onMouseup(event) {
// 只用当元素挪动过了,脱离函数体才会触发。
if (this.isDown) {
console.log('fail');
this.totalOffsetX += event.clientX - this.disX;
this.totalOffsetY += event.clientY - this.disY;
this.isDown = false;
}
}
ngOnInit() {
this.el.nativeElement.style.position = 'relative';
}
}
2.运用
首先将指令在Module中注册,在declarations
数组中增加指令。
然后在要拖拽的组件上,增加指令 appDrag
,即可完成拖拽功用。