angular-ng-zorro，自定义模态窗拖动指令

Posted 2022-03-14 huangmin1992

import  Directive, ElementRef, Renderer2, AfterViewInit  from ‘@angular/core‘;
@Directive(
  selector: ‘[appDragModal]‘
)
export class DragModalDirective implements AfterViewInit 
  private canMove: boolean = false;
  private modalX: number = 0;
  private modalY: number = 0;
  private mouseDownX: number = 0;
  private mouseDownY: number = 0;
  private distX: number = 0;
  private distY: number = 0;
  constructor(private elementRef: ElementRef, private render: Renderer2) 
  
  ngAfterViewInit() 
    let modalElement = this.getModalElement();
    let modalTitleElement = this.getModalTitleElment();
    console.log(modalElement)
    console.log(modalTitleElement);
    this.render.listen(modalTitleElement, ‘mousedown‘, function (event) 
      this.mouseDownX = event.clientX;
      this.mouseDownY = event.clientY;
      this.modalX = modalElement.offsetLeft;
      this.modalY = modalElement.offsetTop;
      this.distX = event.clientX - modalElement.offsetLeft;
      this.distY = event.clientY - modalElement.offsetTop;
      this.render.setStyle(modalElement, "position", "absolute");
      this.render.setStyle(modalElement, "top", `$this.modalYpx`);
      this.render.setStyle(modalElement, "left", `$this.modalXpx`);
      this.canMove = true;
    .bind(this));
    this.render.listen(modalTitleElement, ‘mouseup‘, function (event) 
      this.canMove = false;
    .bind(this));
    this.render.listen(this.elementRef.nativeElement, ‘mousemove‘, function (event) 
      if (this.canMove) 
        let moveX = event.clientX - this.distX;
        let moveY = event.clientY - this.distY;
        const modalWidth = modalElement.offsetWidth;
        const modalHeight = modalElement.offsetHeight;
        const cw = document.documentElement.clientWidth;
        const cy = document.documentElement.clientHeight;

        if (moveY < 0) 
          moveY = 0;
         else if (moveY > cy - modalHeight) 
          moveY = cy - modalHeight;
        

        if (moveX < 0) 
          moveX = 0;
         else if (moveX > cw - modalWidth) 
          moveX = cw - modalWidth;
        

        this.render.setStyle(modalElement, "top", `$moveYpx`);
        this.render.setStyle(modalElement, "left", `$moveXpx`);
        this.render.setStyle(modalElement, "cursor", `move`);
      
    .bind(this));
  
  getModalElement() 
    return this.elementRef.nativeElement.querySelector(‘.ant-modal‘);
  
  getModalTitleElment() 
    console.log(this.elementRef.nativeElement)
    return this.elementRef.nativeElement.querySelector(‘.ant-modal-content‘);
  

View Code