面向对象思想-封装拖拽对象

1、我们常常会通过修改元素的top，left，translate来其的位置发生改变。修改元素的left，top值，但会引起页面重绘，而transform不会，所以要优先使用transform。
2、如何获取当前浏览器支持的transform兼容写法
3、获取元素的初始位置：
4、需要绑定的事件：mousedown，mousemove，mouseup
而在移动端，分别与之对应的则是touchstart、touchmove、touchend。
5、原理

当事件触发时，我们可以通过事件对象获取到鼠标的精切位置。这是实现拖拽的关键。当鼠标按下(mousedown触发)时，我们需要记住鼠标的初始位置与目标元素的初始位置，我们的目标就是实现当鼠标移动时，目标元素也跟着移动，根据常理我们可以得出如下关系：
移动后的鼠标位置 - 鼠标初始位置 = 移动后的目标元素位置 - 目标元素的初始位置
如果鼠标位置的差值我们用dis来表示，那么目标元素的位置就等于：
移动后目标元素的位置 = dis + 目标元素的初始位置

通过事件对象，我们可以精确的知道鼠标的当前位置，因此当鼠标拖动(mousemove)时，我们可以不停的计算出鼠标移动的差值，以此来求出目标元素的当前位置。这个过程，就实现了拖拽。

而在鼠标松开(mouseup)结束拖拽时，我们需要处理一些收尾工作。

6、封装原则

如何合理的处理属性与方法的位置。

• 构造函数中： 属性与方法为当前实例单独拥有，只能被当前实例访问，并且每声明一个实例，其中的方法都会被重新创建一次。

• 原型中： 属性与方法为所有实例共同拥有，可以被所有实例访问，新声明实例不会重复创建方法。

• 模块作用域中：属性和方法不能被任何实例访问，但是能被内部方法访问，新声明的实例，不会重复创建相同的方法。

对于方法的判断比较简单。

• 因为在构造函数中的方法总会在声明一个新的实例时被重复创建，因此我们声明的方法都尽量避免出现在构造函数中。

• 而如果你的方法中需要用到构造函数中的变量，或者想要公开，那就需要放在原型中。

• 如果方法需要私有不被外界访问，那么就放置在模块作用域中。

对于属性的判断

对于属性放置于什么位置需要在实际开发中不断的总结经验。

• 如果属性值只能被实例单独拥有，比如person对象的name，只能属于某一个person实例，又比如这里拖拽对象中，某一个元素的初始位置，也仅仅只是这个元素的当前位置，这个属性，则适合放在构造函数中。

• 而如果一个属性仅仅供内部方法访问，这个属性就适合放在模块作用域中。

模块封装代码：

; //文件合并时，防止前一个文件末尾没加分号  (function() {    //私有属性，内部使用，不需实例访问    var transform = getTransform();    function Drag(selector) {      this.elem = typeof selector == 'object' ? selector : document.getElementById(selector);      this.startX = 0;      this.startY = 0;      this.sourceX = 0;      this.sourceY = 0;      this.init();    }    Drag.prototype = {      constructor: Drag,      init: function() {        this.setDrag();      },      getStyle: function(property) {        return window.getComputedStyle ? window.getComputedStyle(this.elem, null).getPropertyValue(property) : this.currentStyle.getAttribute(property);      },      //获取当前元素的位置信息，注意与之前的不同之处      getPosition: function() {        var pos = { x: 0, y: 0 };        if (transform) {          var transformValue = this.getStyle(transform);          if (transformValue == 'none') {            this.elem.style[transform] = 'translate(0,0)';          } else {            var temp = transformValue.match(/-?\d+/g);            pos = {              x: parseInt(temp[4].trim()),              y: parseInt(temp[5].trim())            }          }        } else {          if (this.getStyle('position') == 'static') {            this.elem.style.position = 'relative';          } else {            pos = {              x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),              y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)            }          }        }        return pos;      },      // 用来设置当前元素的位置      setPosition: function(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: function() {        var self = this;        this.elem.addEventListener('mousedown', start, false);        function start(event) {          //鼠标初始位置          self.startX = event.pageX;          self.startY = event.pageY;          var pos = self.getPosition();          self.sourceX = pos.x;          self.sourceY = pos.y;          document.addEventListener('mousemove', move, false);          document.addEventListener('mouseup', end, false);        }        function move(event) {          // 获取鼠标当前位置          var curX = event.pageX;          var curY = event.pageY;          // 计算差值          var disX = curX - self.startX;          var disY = curY - self.startY;          self.setPosition({            x: (self.sourceX + disX).toFixed(),            y: (self.sourceY + disY).toFixed()          });        }        function end(event) {          document.removeEventListener('mousemove', move);          document.removeEventListener('mouseup', end);          //do other things        }      }    }    //私有方法    function getTransform() {      var transform = '',        divStyle = document.createElement('div').style,        transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'oTransform'];      //通过循环找出浏览器识别的那个，in操作符用于判断是否识别      for (var i = 0, len = transformArr.length; i < len; i++) {        if (transformArr[i] in divStyle) {          return transform = transformArr[i];        }      }      return transform;    }    window.Drag = Drag;  })();  new Drag('target');  new Drag('target2');

html：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style>  * {    padding: 0;    margin: 0;  }  #target,  #target2 {    width: 50px;    height: 50px;    background-color: orange;    cursor: move;  }  #target2 {    background-color: red;  }  </style></head><body>  <div style="height:1000px">hha</div>  <div id="target"></div>  <div id="target2"></div> </body></html>

jquery实例方法扩展：

// 通过扩展方法将拖拽扩展为jQuery的一个实例方法(function ($) {  $.fn.extend({    becomeDrag: function () {      new Drag(this[0]);      return this;   // 注意：为了保证jQuery所有的方法都能够链式访问，每一个方法的最后都需要返回this，即返回jQuery实例    }  })})(jQuery);

参考链接：http://www.jianshu.com/p/b3dee0e84454
http://www.jianshu.com/p/3f97570d22b4