Angular6实现拖拽功能指令drag实例详解

 更新时间:2023年11月01日 11:59:47   作者:双木枯荣  
这篇文章主要为大家介绍了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的资料请关注脚本之家其它相关文章!

相关文章

最新评论