title: How to rotate an element on drag with jQuery?
body: <p>I'm creating a website with a rotating wheel. The user should be able to rotate this wheel with dragging it with mouse. I implemented this in jQuery and it works(rotates). But it behaves as expected just between 90 degrees and 180 degrees. When it rotates more or less than this range, I see some unexpected bounces.</p>
  
  <p>This is my code:</p>
  
  <pre><code>$(document).ready(function(){
      var isDragging = false;
  
      $("#box").mousemove(function(e){
          if(isDragging){
              e.preventDefault();
  
              var rx = $(this).width() / 2;
              var ry = $(this).height() / 2;
  
              var px = e.clientX - $(this).offset().left - rx;
              var py = e.clientY - $(this).offset().top - ry;
  
              var a = Math.atan2(py,px) * 180 / Math.PI + 90;
  
              if(py &lt;= 0 &amp;&amp; px &lt; 0){a = 360 + a;}
  
              $(this).css("-webkit-transform","rotate(" + a + "deg)");
          }
      });
  
      $("#box").mousedown(function(){
          isDragging = true;
      });
  
      $("*").mouseup(function(){
          isDragging = false;
      });
  });
  </code></pre>
  
  <p>What is the problem? How to solve it?</p>