element-ui-for-gov/lib/utils/dragdom.js

element-ui for gov

'use strict';

exports.__esModule = true;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var DragDom = function () {
  function DragDom(dragHeaderEl, dragDom) {
    _classCallCheck(this, DragDom);

    this.draging = false;
    this._dragHeaderEl = dragHeaderEl;
    this._dragDom = dragDom;
    this._sty = null;
    this._dis = {};
    this._styObj = {};
  }

  DragDom.prototype.domMousemove = function domMousemove(e) {
    if (this.draging) {
      // 通过事件委托，计算移动的距离
      var l = e.clientX - this._dis.disX;
      var t = e.clientY - this._dis.disY;

      // 移动当前元素
      this._dragDom.style.left = l + this._styObj.styL + 'px';
      this._dragDom.style.top = t + this._styObj.styT + 'px';
    }
  };

  DragDom.prototype.domMouseup = function domMouseup() {
    this.draging = false;
  };

  DragDom.prototype.onMousedown = function onMousedown(e) {
    this.draging = true;
    // 鼠标按下，计算当前元素距离可视区的距离
    var disX = e.clientX - this._dragHeaderEl.offsetLeft;
    var disY = e.clientY - this._dragHeaderEl.offsetTop;
    this._dis = { disX: disX, disY: disY };
    // 获取到的值带px 正则匹配替换
    var styL = void 0,
        styT = void 0;

    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
    if (this._sty.left.includes('%')) {
      styL = +document.body.clientWidth * (+this._sty.left.replace(/\%/g, '') / 100);
      styT = +document.body.clientHeight * (+this._sty.top.replace(/\%/g, '') / 100);
    } else {
      styL = +this._sty.left.replace(/\px/g, '');
      styT = +this._sty.top.replace(/\px/g, '');
    }
    if (isNaN(styL)) {
      styL = 0;
    }
    if (isNaN(styT)) {
      styT = 0;
    }
    this._styObj = { styL: styL, styT: styT };
    this.bindDomMousemove = this.domMousemove.bind(this);
    this.bindDomMouseup = this.domMouseup.bind(this);
    document.addEventListener('mousemove', this.bindDomMousemove);
    document.addEventListener('mouseup', this.bindDomMouseup);
  };

  DragDom.prototype.initDrag = function initDrag(dragHeaderEl, dragDom) {
    this._dragHeaderEl = dragHeaderEl;
    this._dragDom = dragDom;
    this._dragDom.style.left = 0;
    this._dragDom.style.top = 0;
    this._sty = this._dragDom.currentStyle || window.getComputedStyle(this._dragDom, null);
    this._dragHeaderEl.style.cursor = 'move';
    this.bindOnMousedown = this.onMousedown.bind(this);
    this._dragHeaderEl.addEventListener('mousedown', this.bindOnMousedown);
  };

  DragDom.prototype.removeDrag = function removeDrag(dragHeaderEl, dragDom) {
    this._dragHeaderEl.removeEventListener('mousedown', this.bindOnMousedown);
    document.removeEventListener('mousemove', this.bindDomMousemove);
    document.removeEventListener('mouseup', this.bindDomMouseup);
    this._dragHeaderEl.style.cursor = 'default';
  };

  return DragDom;
}();

exports.DragDom = DragDom;