Angular 如何开发自定义指令

Angular 如何开发自定义指令

今天在工作中遇到了 需要拖拽的功能，在网上查了一下说需要自己开发指令 然后就自定义了一个appDrag的属性指令(我的需求是可以自由拖拽图片到任意地点)

步骤:

1. 在自己想要的文件夹下创建 ng g directive drag
2. 指令中需要引入ElementRef, HostListener

import { Directive, ElementRef, HostListener ,Input} from '@angular/core';

1. 开始实施功能

export class DragDirective {

   constructor(public  el: ElementRef) { 

  }

  public isDown = false;      // 是否允许拖拽

  public disX;                // 记录鼠标点击事件的位置 X

  public disY;                // 记录鼠标点击事件的位置 Y

  public l;

  public t;

  private totalOffsetX = 0;   // 记录总偏移量 X轴

  private totalOffsetY = 0;   // 记录总偏移量 Y轴

 

  // 点击事件

  @HostListener('mousedown', ['$event']) onMousedown(event) {

    this.isDown = true;

    this.el.nativeElement.style.cursor = 'move';

    this.disX = event.clientX;

    this.disY = event.clientY;

    this.l = this.el.nativeElement.offsetLeft;

    this.t = this.el.nativeElement.offsetTop;

  }

 

  // 监听document移动事件事件

  @HostListener('document:mousemove', ['$event']) onMousemove(event) {

    // 判断该元素是否被点击了。

    if (this.isDown) {

      this.el.nativeElement.style.left = event.clientX -(this.disX-this.l) + 'px';

      this.el.nativeElement.style.top =  event.clientY -(this.disX-this.l)+ 'px';

    } else {

      return ;

    }

  }

 

  // // 监听document离开事件

  @HostListener('document:mouseup', ['$event']) onMouseup(event) {

    // 只用当元素移动过了，离开函数体才会触发。

    if (this.isDown) {

      this.isDown = false;

    }

  }

 

  ngOnInit() {

    this.el.nativeElement.style.position = 'absolute';

  }

 

}

在html页面中直接引入即可

重点在于 appDrag