/**
 * 自定義執(zhí)行函數(shù)將變量封為私有變量
 */
;
(function(window) {
        //這是一個(gè)私有屬性，不需要被實(shí)例訪(fǎng)問(wèn)
        var transform = getTransform();
        function Drag(selector) {
            //放在構(gòu)造函數(shù)中的屬性，都是屬于每一個(gè)實(shí)例單獨(dú)擁有
            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();
            },
            // 稍作改造，僅用于獲取當(dāng)前元素的屬性，類(lèi)似于getName
            getStyle: function(property) {
                return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[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 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() {
                    document.removeEventListener('mousemove',move);
                    document.removeEventListener('mouseup',end);
                }
            },
        };
        //私有方法，僅僅用來(lái)獲取transform的兼容寫(xiě)法
        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;
        }
        //一種對(duì)外暴露的方式
        window.Drag = Drag;
    })(window);
    new Drag('app');