js 點擊拖動

點擊拖動

(function(){
var transform = getTransform();
function Drag(selector){
this.elem = typeof selector == ‘object’ ? selector : document.querySelector(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 document.defaultView.getComputedStyle?document.defaultView.getComputedStyle(this.elem, null)[property]:this.elem.currentStyle[property]; 
    },
    getPosition: function(){
        var pos = {x:0, y:0};
        var transform = getTransform();
        if(transform){
            var transformValue = this.getStyle('transform');
            if(transformValue == 'none'){
                this.elem.style.transform = 'transform(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(elem, 'positon') == 'static'){
                elem.style.position = 'relative';
                return pos;
            }else{
                var x = parseInt(this.getStyle('left')?this.getStyle('left'):0)
                var y = parseInt(this.getStyle('right')?this.getStyle('right'):0)
                return pos = { 
                    x: x,
                    y: y
                }
            }
        }
    },
    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 disX = currentX - self.startX;
            var disY = currentY - 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);
        }
    }
}

function getTransform(){
    var transform = '',
        divStyle = document.createElement('div').style,
        _transforms = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
        i = 0,
        len = _transforms.length;
    for(;i < len; i++){
        if(_transforms[i] in divStyle){
            return transform = _transforms[i];
        }
    }
    return transform;
}
window.Drag = Drag;

})();

#dragObject{
width: 100px;
height: 100px;
background: #aaa;
cursor: pointer;
position: relative;
text-align:center;