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
  • 相关阅读:
    b2c项目基础架构分析(二)前端框架 以及补漏的第一篇名词解释
    b2c项目基础架构分析(一)b2c 大型站点方案简述 已补充名词解释
    SQLite 创建自增长标识列
    【第三方支付】之微信支付
    【第三方登录】之微信第三方登录
    【第三方登录】之QQ第三方登录
    2014年互联网IT待遇【转载】
    有趣的程序
    python备忘录
    JAVA备忘录
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/11131972.html
Copyright © 2011-2022 走看看