Dragging background-image

by joplomacedo

HTML

<div id="map"></div>

CSS

#map {
    position: fixed;
   width : 300px;
   height : 300px;
   border : 1px solid rgb(0, 0, 0);
    background-color: #6E6E6E;
   cursor : move;
    top: 0;
    left: 0;
}

JavaScript

var AttachDragTo = (function () {
        var _AttachDragTo = function (el) {
            this.el = el;
            this.mouse_is_down = false;
            
            this.init();
        };
        
        _AttachDragTo.prototype = {
            onMousemove: function (e) {
                if ( !this.mouse_is_down ) return;
                var tg = e.target,
                    x = e.clientX,
                    y = e.clientY;
        
                tg.style.left = x + this.x2 + 'px';
                tg.style.top = y + this.y2 + 'px';
            },
        
            onMousedown: function(e) {
                
                this.mouse_is_down = true;
                this.mouse_origin_x = e.clientX;
                this.mouse_origin_y = e.clientY;
                console.log('mousedown');
                this.x2 = -this.mouse_origin_x + this.draggable_origin_x;
                this.y2 = -this.mouse_origin_y + this.draggable_origin_y;
            },
        
            onMouseup: function(e) {
                var tg = e.target,
                    styles = getComputedStyle(tg);
        
                this.mouse_is_down = false;
                this.draggable_origin_x = parseInt(styles.getPropertyValue('left'), 10);
                this.draggable_origin_y = parseInt(styles.getPropertyValue('top'), 10);
            },
   
            
            init: function () {
                var styles = getComputedStyle(this.el);
                this.draggable_origin_x = parseInt(styles.getPropertyValue('left'), 10);
                this.draggable_origin_y = parseInt(styles.getPropertyValue('top'), 10);
                
                //attach events
                this.el.addEventListener('mousedown', this.onMousedown.bind(this), false);
                this.el.addEventListener('mouseup', this.onMouseup.bind(this), false);
                this.el.addEventListener('mousemove', this.onMousemove.bind(this), false);
            }
        };
        
        return...