顺时针（只）元素周围

Question

我使用这个代码来拖动另一个圆形元素的元素在一个项目上工作的旋转：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'));  
       }); 

      });      
     }); 

我需要修改它，所以它只能向一个方向旋转，顺时针或逆时针。

任何有关如何解决这个问题的建议，因为我很难过。

Answer 1

只是跟踪以前的旋转度，而当结果大于以前只调整CSS：

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