Angular6实现拖拽功能指令drag实例详解
作者:双木枯荣
这篇文章主要为大家介绍了Angular6实现拖拽功能指令drag实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
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
,即可实现拖拽功能。
以上就是Angular6实现拖拽功能指令drag实例详解的详细内容,更多关于Angular6拖拽功能指令drag的资料请关注脚本之家其它相关文章!