拖拽对象的封装

一般我们实现拖拽对象，都是对单个元素进行封装，但是如果有多个元素都要实现拖拽效果，代码量就会十分庞大，所以我们可以结合面向对象的思想和闭包等知识，封装一个拖拽对象。

基本思路：

1、如何让元素动起来？

我们通常通过修改元素的left,top,translate来让元素的位置改变。但是由于修改left,top值会引起页面重绘，而translate不会，因此从性能优化方面考虑，一般会选择translate属性。

2、获取当前浏览器支持的translate兼容写法

3、获取元素的当前位置getStyle(elem,property)和getTargetPos(elem)和setTargetPos(elem,pos)

4、拖拽

• mousedown
  (1)、获取鼠标初始位置
  (2)、获取目标元素初始位置
  (3)、绑定mousemove和mouseup

• mousemove
  (1)、获取当前鼠标的位置
  (2)、计算鼠标移动差值
  (3)、通过差值计算目标元素当前位置
  (4)、设置目标元素的位置

• mouseup
  (1)、解除mousemove和mouseup的绑定
  (2)、做其他需要在拖拽之后完成的事情

实现过程

1、为了避免变量污染，我们需要将模块设置于一个函数自执行方式模拟的块级作用域中。

;(function(){
      ...
})()

2、构建一个拖拽对象drag，分别在构造函数，原型，和模块作用域中设置方法和属性。

(1)、首先在模块作用域中定义一个getTransform方法，只供模块里面的对象使用，不对外使用。

;(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;
    }
})()

(2)、然后通过构造函数模式构造一个drag对象，并且在构造函数中定义属性和方法，这些属性和方法，所有不同实例都不一样的。

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();
    }

(3)、然后再原型中定义方法，让所有实例都共享这些方法

* 获取元素指定样式的方法getStyle(property)

getStyle:function(property){
            return document.defaultView.getComputedStyle()?document.defaultView.getComputedStyle(elem,false)[property]:this.elem.currentStyle[property];
        }

* 获取当前元素的位置信息getPosition()

//用来获取当前元素的位置信息
        getPosition:function(){
            var pos ={x:0,y:0};
            if(transform){
                var transformVaule = this.getStyle(transform);
                if(transformVaule == 'none'){
                    this.elem.style[transform] = 'translate(0,0)';
                }else{
                    var temp = transformVaule.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('right')?this.getStyle('right'):0)
                    }
                }
            }
            return pos;
        }

* 设置当前元素的位置setPosition(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.right = pos.y + 'px';
            }
        }

* 绑定拖拽事件的方法setDrag

//该方法用来绑定事件
        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 currentX = event.pageX;
                var currentY = event.pageY;

                var distanceX = currentX - self.startX;
                var distanceY = currentY - self.startY;

                self.setPosition({
                    x:(self.sourceX + distanceX).toFixed(),
                    y:(self.sourceY + distanceY).toFixed()
                })
            }
            function end(Event){
                document.removeEventListener('mousemove',move);
                document.removeEventListener('mouseup',end);
            }
        }

3、利用闭包将模块暴露出去

window.Drag = Drag;

调用方法

new Drag("div");

详细代码地址：https://github.com/McRayFE/dragConponent