Question

Im trying to make a spinning wheel rotate when dragging the mouse on it. The wheel is formed by 3 pieces so I mapped each image independently in order to target the section of the wheel which I want to rotate. Right now it is working pretty good. The only problem being that im using event.clientX for the rotation parameter and it can be kinda random at times, sometimes the wheel moves to a random angle on start but for the most part it works. I would just like a formula to feed a better rotation parameter to my script. Here is the code I currently have:

var isDragging      = false;

var innerWheelActive    = false;
var middleWheelActive   = false;
var outerWheelActive    = false;

$(document).ready(function() {



    /*------------------------------------------*/

    $("#mapping map #middleArea").mousedown(function() {
            isDragging  = true;
            middleWheelActive   = true;

            return false;
    });

    $("#mapping map #innerArea").mousedown(function() {
            isDragging  = true;
            innerWheelActive    = true;

            return false;
    });

    $("#mapping map #outerArea").mousedown(function() {
            isDragging  = true;
            outerWheelActive    = true;

            return false;
    });

    $(document).mousemove(function(event) {
        if (isDragging) {       

            var rotateCSS = 'rotate(' + event.clientX + 'deg)';
            if(innerWheelActive)
                $('#innerWheel img').css({ '-webkit-transform': rotateCSS });
            else if(middleWheelActive)
                $('#middleWheel img').css({ '-webkit-transform': rotateCSS });
            else if(outerWheelActive)
                $('#outerWheel img').css({ '-webkit-transform': rotateCSS });

            return false;
        }
    });

    $(document).mouseup(function() {
        if (isDragging){
            console.log('stopped');
            isDragging  = false;
            innerWheelActive    = false;
            middleWheelActive   = false;
            outerWheelActive    = false;
            return false;
        }
    });

}); 

Answer 1

Try to add event.preventDefault and event.stopPorpagation in your callback function :

$('img').draggable({
    drag: function(event, ui){
        var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
        $(this).css({ '-webkit-transform': rotateCSS });
        event.preventDefault();
        event.stopPropagation();
    }
});