jQuery jStick demo

This is a very basic example of what you can do with the jQuery plugin "jStick". More info : https://github.com/nicooprat/jStick

HTML

<body>
        
    <div id="target" style="width:100px;height:100px;border:1px solid black;"></div>
    <dihttp://jsfiddle.net/Tt9xm/38/#runv id="output"></div>
</body>

JavaScript

var Point = function(x,y){
    this.x = x;
    this.y = y;
    this.toString = function(){
        return "x:"+this.x+",y:"+this.y;
    };
};

var JStick = function(opts){
    var bind = function(joystick, target){
        target.addEventListener('mousedown',function(ev){
            if (joystick.enabled && ev.button == 0){
                opts.onactivate();
                joystick.active = true;
                joystick.start = new Point(ev.pageX, ev.pageY);
            }
        });
        document.addEventListener('mouseup', function(){
            if (joystick.enabled){
                var wasActive = joystick.active;
                joystick.active = false;
                if (wasActive) opts.onrelease();
            }
        });
        document.addEventListener('mousemove', function(){
            if (joystick.enabled){
                joystick.now.x = ev.pageX;
                joystick.now.y = ev.pageY;
                opts.ondrag(joystick.now);
            }
        });
    };
    var init = function(joystick){
        bind(joystick);
        return joystick;
    };
    var diff = function(dimension){
        return function(sensitivity){
            return (this.now[dimension] - this.start[dimension])
            / (sensitivity ? Math.pow(10,sensitivity) : 1);
        }
    };
    return init({
        enabled: true,
        active: true,
        start: new Point(0,0),
        now: new Point(0,0),
        dx: diff('x'),
        dy: diff('y')
    });
};

$(document).ready(function() {
    console.log('hi');
    var jstick = new JStick({
        target: $('#target')[0],
        ondrag: function(diff){
            console.log('hello');
            $('#output').html(diff);
        }
    });
    console.log('bye');
});