用鼠标旋转轮盘

Question

我正在看这个示例（ jsfiddle ）。 这几乎是我所需要的，但是我需要用户用鼠标“抓住”轮盘，然后旋转它，就像用一只手来制作轮盘一样。

就像，您单击并按住滚轮，它“粘在”鼠标上，然后向左或向右移动鼠标，然后释放按钮，滚轮开始旋转直到停止。

另一个问题是，即使用户正在这样做，我也可以选择预定的轮挡顺序吗？

这是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

我已经设法工作了。 我使用了jQuery Rotate库。

谢谢！