顺时针（仅）围绕元素旋转

Question

I'm working on a project using this code to drag an element around another circular element: http://jsfiddle.net/sandeeprajoria/x5APH/11/

    function rotateAnnotationCropper(offsetSelector, xCoordinate, yCoordinate, cropper){
                //alert(offsetSelector.left);

                var x = xCoordinate - offsetSelector.offset().left - offsetSelector.width()/2;
                var y = -1*(yCoordinate - offsetSelector.offset().top - offsetSelector.height()/2);
                var theta = Math.atan2(y,x)*(180/Math.PI);        


                var cssDegs = convertThetaToCssDegs(theta);
                var rotate = 'rotate(' +cssDegs + 'deg)';
                cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
                $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});

        }

        function convertThetaToCssDegs(theta){
            var cssDegs = 90 - theta;
            return cssDegs;
        }

        $(document).ready(function(){               

            $('#marker').on('mousedown', function(){
                $('body').on('mousemove', function(event){
                    rotateAnnotationCropper($('#innerCircle').parent(), event.pageX,event.pageY, $('#marker'));    
                });

            });                    
        }); 

I need to amend it so it only rotates in one direction, either clockwise or anti-clockwise.

Any advice on how to tackle it as i am stumped.

Answer 1

Just keep track of the previous rotation-degrees, and only adjust css when the result is greater than previous:

 var previousCssDegs = 45;
 var clockwise = true; // set false for anti-clockwise

 function rotateAnnotationCropper() {
     // snip
     var cssDegs = convertThetaToCssDegs(theta);

     var isClockwise = 
         (
             cssDegs > previousCssDegs 
             && cssDegs - previousCssDegs < 20 // disallow to move from -80 to 80
         )
         || cssDegs < -80 && previousCssDegs > 80 // allow to move pass 90 > -90
     ;
     if(isClockwise == clockwise) {
          var rotate = 'rotate(' +cssDegs + 'deg)';
          cropper.css({'-moz-transform': rotate, 'transform' : rotate, '-webkit-transform': rotate, '-ms-transform': rotate});
          previousCssDegs = cssDegs;
     }
     $('body').on('mouseup', function(event){ $('body').unbind('mousemove')});
 }

Fiddle