用鼠标旋转轮盘

Question

I'm looking at this example ( jsfiddle ). It's almost what I need, but I need the user to "grab" the roulette with the mouse, then spin it, like you would do with a real one with your hand.

Like, you click and hold on the wheel, it "sticks" to your mouse, then you move your mouse to left or right, and release the button, and the wheel starts to spin until it stops.

Another question is, even if the user is doing that, can I choose a predetermined order to the wheel stops?

This is the jsFiddle:

$(function(){

            var overWheel = false;
            var mouseDown = false;
            var lastMousePos = 0;

            $('.wheel').on('mouseover', function(){
                overWheel = true;
            }).on('mouseout', function(){
                overWheel = false;
            });


            $(document).on('mousedown', function(e){
                if(overWheel){
                    lastMousePos = e.offsetY;
                    mouseDown = true;
                }
            }).on('mouseup', function(){
                mouseDown = false;
            });


            $(document).on('mousemove', function(e){
                if(overWheel && mouseDown){
                    handleWheel(e);
                }
            });


            function handleWheel(e) {

                var yPos = e.offsetY;
                var direction = 0;

                var deg = getRotationDegrees($('.wheel'));


                if(yPos < lastMousePos){ // mouse is going up, move against the clock
                    console.log(yPos);
                    direction = -2;

                } else { //mouse is going down, move with the clock

                    direction = 2;

                }

                $('.wheel').css({'-webkit-transform': 'rotate(' + (deg + (direction)) + 'deg)'});
            }

            function getRotationDegrees(obj){
                var matrix = obj.css("-webkit-transform");
                if(matrix !== 'none') {
                    var values = matrix.split('(')[1].split(')')[0].split(',');
                    var a = values[0];
                    var b = values[1];
                    var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
                } else { var angle = 0; }
                return angle;
            }

        });​

Answer 1

I've managed to work. I Used the jQuery Rotate library.

Thanks!