title: ReactJs rotate functionality not working
body: <p><strong>Environment:</strong> </p>
  
  <ul>
  <li>OS: Windows 7 - 64 bit</li>
  </ul>
  
  <p>I am trying to rotate a div in <strong>Reactjs</strong> using click and drag mouse event as like <a href="https://jsfiddle.net/arunvalaven/ny6jqtLj/4/" rel="nofollow noreferrer">this</a> one in <strong>javascript code</strong> which is working perfectly. </p>
  
  <p>I did a <a href="http://jsfiddle.net/arunvalaven/o5L8g4ra/107/" rel="nofollow noreferrer">ReactJs app</a>, with the reference of above given javascript rotate funtionality.</p>
  
  <p>But in this ReactJs app, there is some problem to rotate with the handle, rotate not working properly as like javascript functionality.</p>
  
  <p><strong>Javascript rotate code</strong></p>
  
  <pre><code>var dragging = false,target_wp,o_x, o_y, h_x, h_y, last_angle,origin_left,origin_top;
  $('.handle').mousedown(function (e) {
    h_x = e.pageX;
    h_y = e.pageY; // clicked point
    e.preventDefault();
    e.stopPropagation();
    dragging = true;
    target_wp = $(e.target).closest('.draggable_wp');
  
    if(origin_left == undefined){
      origin_left = target_wp.offset().left;
      origin_top= target_wp.offset().top;
    }
  
    o_x = origin_left;
    o_y = origin_top; // origin point
  
    last_angle = last_angle || 0;
  })
  
  $(document).mousemove(function (e) {
    if(dragging) {
      var s_x = e.pageX, s_y = e.pageY; // start rotate point
      if(s_x !== o_x &amp;&amp; s_y !== o_y) { //start rotate
        var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
        s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
        s_rad += last_angle; // relative to the last one
        var degree = (s_rad * (360 / (2 * Math.PI)));
        target_wp.css('-moz-transform', 'rotate(' + degree + 'deg)');
        target_wp.css('-moz-transform-origin', '50% 50%');
        target_wp.css('-webkit-transform', 'rotate(' + degree + 'deg)');
        target_wp.css('-webkit-transform-origin', '50% 50%');
        target_wp.css('-o-transform', 'rotate(' + degree + 'deg)');
        target_wp.css('-o-transform-origin', '50% 50%');
        target_wp.css('-ms-transform', 'rotate(' + degree + 'deg)');
        target_wp.css('-ms-transform-origin', '50% 50%');
      }
    }
  }) // end mousemove
  
    $(document).mouseup(function (e) {
      dragging = false
      var s_x = e.pageX, s_y = e.pageY;
  
      // Saves the last angle for future iterations
      var s_rad = Math.atan2(s_y - o_y, s_x - o_x); // current to origin
      s_rad -= Math.atan2(h_y - o_y, h_x - o_x); // handle to origin
      s_rad += last_angle;
      last_angle = s_rad;
    })
  </code></pre>
  
  <p>How to make work <strong>ReactJs app</strong> as perfect as like <strong>Javascript code</strong>...?</p>
  
  <p>Thanks in Advance..!</p>