zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    SQL学习
    设计模式学习之简单工厂
    c#读写操作3
    SQL存储过程学习
    c# xml的读写
    SQL存储过程实例
    存储过程分页
    搞双显示器
    转:用药的七种心理误区
    lp提了一个非常让偶非常郁闷的要求……
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/11131972.html
Copyright © 2011-2022 走看看