面向对象实现拖拽

最近看到一篇文章讲了用原生js实现一个拖拽组件，而我自己还没有尝试过写拖拽组件，正好通过这次来实现一个。大致涉及到了模块化，闭包，面向对象，this,私有变量等知识。主要原理就是：

• 物体移动后的位置等于物体原来的位置+鼠标移动的距离。

废话少说，上代码：

#target{
  width: 50px;
  height: 50px;
  background-color: orange;
  cursor:move;
}

! (function () {
      // 
      // 这是一个私有属性，不需要被实例访问
      var transform = getTransform();
      // 获取当前浏览器支持的transform兼容写法
      function getTransform() {
        var transform = '',
          divStyle = document.createElement('div').style,
          // 可能涉及到的几种兼容性写法，通过循环找出浏览器识别的那一个
          transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

          i = 0,
          len = transformArr.length;

        for (; i < len; i++) {
          if (transformArr[i] in divStyle) {
            // 找到之后立即返回，结束函数
            return transform = transformArr[i];
          }
        }

        // 如果没有找到，就直接返回空字符串
        return transform;
      }
      function Drag(selector) {
        this.elem = typeof selector === 'Object' ? selector : document.getElementById(selector);
        // 声明2个变量用来保存鼠标初始位置的x，y坐标
        this.startX = 0;
        this.startY = 0;
        // 声明2个变量用来保存目标元素初始位置的x，y坐标
        this.sourceX = 0;
        this.sourceY = 0;
        this.init();
      }
      Drag.prototype = {
        constructor: Drag,
        init() {
          // 
          this.setDrag();
        },

        // 获取元素属性
        getStyle(property) {
          // ie通过currentStyle来获取元素的样式，其他浏览器通过getComputedStyle来获取
          return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];
        },
        // 获取元素的初始位置
        getTargetPos() {
          var pos = { x: 0, y: 0 };
          if (transform) {
            var transformValue = this.getStyle(transform);
            if (transformValue == 'none') {
              this.elem.style[transform] = 'translate(0, 0)';
              return pos;
            } else {
              var temp = transformValue.match(/-?\d+/g);
              return pos = {
                x: parseInt(temp[4].trim()),
                y: parseInt(temp[5].trim())
              };
            }
          } else {
            if (this.getStyle('position') == 'static') {
              this.elem.style.position = 'relative';
              return pos;
            } else {
              var x = parseInt(this.getStyle('left') ? this.getStyle('left') : 0);
              var y = parseInt(this.getStyle('top') ? this.getStyle('top') : 0);
              return pos = {
                x: x,
                y: y
              };
            }
          }
        },
        // 设置元素的初始位置
        setTargetPos(pos) {
          if (transform) {
            this.elem.style[transform] = 'translate(' + pos.x + 'px, ' + pos.y + 'px)';
          } else {
            this.elem.style.left = pos.x + 'px';
            this.elem.style.top = pos.y + 'px';
          }
        },

        setDrag() {

          var self = this
          this.elem.addEventListener('mousedown', start, false)
          function start(event) {
            // 获取鼠标初始位置
            self.startX = event.pageX;
            self.startY = event.pageY;

            // 获取元素初始位置
            var pos = self.getTargetPos();

            self.sourceX = pos.x;
            self.sourceY = pos.y;

            // 绑定
            document.addEventListener('mousemove', move, false);
            document.addEventListener('mouseup', end, false);
          }
          // 绑定在mousedown上的回调，event为传入的事件对象


          function move(event) {
            // 获取鼠标当前位置
            debugger
            var currentX = event.pageX;
            var currentY = event.pageY;

            // 计算差值
            var distanceX = currentX - self.startX;
            var distanceY = currentY - self.startY;

            // 计算并设置元素当前位置
            self.setTargetPos({
              x: (self.sourceX + distanceX).toFixed(),
              y: (self.sourceY + distanceY).toFixed()
            })
          }
          function end(event) {
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', end);
            // do other things
          }
        }
      }
      window.Drag = Drag
    })()
    // 获取目标元素对象
    // var oElem = document.getElementById('target');
    new Drag('target')

使用了es5的语法，如果有兴趣可以自己用es6语法写一遍（语法糖罢了）。