拖拽对象

/**
 * 封装js拖拽对象
 *
 * 实现参考 https://codepen.io/yangbo5207/pen/LWjWpe
 * 对应教程 http://www.jianshu.com/p/b3dee0e84454
 */
(function (win) {

    'use strict';

    var transform = getTransform();

    // QiuDrag 的构造函数
    function QiuDrag(element) {
        this.element = typeof element === 'object' ? element : document.getElementById(element);
        
        // 鼠标初始位置
        this.startX = 0;
        this.startY = 0;
        // 目标元素初始位置
        this.sourceX = 0;
        this.sourceY = 0;
        
        this.init(); // 初始化
    }

    // 重写QiuDrag的原型，设置对象实例共享的方法
    QiuDrag.prototype = {
        constructor: QiuDrag, // 避免重写原型后丢失 constructor 属性

        init: function () {
            this.bindEvent(); // 绑定事件处理程序
        },

        getStyle: function (property) {
            return getStyle(this.element, property);
        },

        getPosition: function () {
            var pos = {x: 0, y: 0};

            if (transform) {
                var transformValue = this.getStyle(transform); // transformValue是一个形如"matrix(0, 0, 0, 0, 0, 0)"的字符串

                if (transformValue === 'none') {
                    this.element.style[transform] = 'translate(0, 0)';
                } else {
                    var temp = transformValue.substring(7, transformValue.length-1).split(', ');
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    }
                }
            } else {
                if (this.getStyle('position') === 'static') {
                    this.element.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.element.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
            } else {
                this.element.style.left = pos.x + 'px';
                this.element.style.top = pos.y + 'px';
            }
        },

        // 绑定事件处理程序
        bindEvent: function () {
            var self = this;
            self.element.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);
                // do other things
            }
        }
    };

    // 获取兼容的transform写法
    function getTransform() {
        var transform = '',
            transformList = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
            style = document.createElement('div').style,
            i;

        for (i = 0; i < transformList.length; i++)
            if (transformList[i] in style)
                return transformList[i];

        return transform;
    }

    // 获取计算样式的兼容的写法
    function getStyle(e, property) {
        return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(e, null)[property] : e.currentStyle[property];
    }


    win.QiuDrag = QiuDrag;

}(window));