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

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.modalY}px`);
      this.render.setStyle(modalElement, "left", `${this.modalX}px`);
      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", `${moveY}px`);
        this.render.setStyle(modalElement, "left", `${moveX}px`);
        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

 

转载于:https://www.cnblogs.com/huangmin1992/p/11131972.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值