ReactJs rotate functionality not working

Question

Environment:

• OS: Windows 7 - 64 bit

I am trying to rotate a div in Reactjs using click and drag mouse event as like this one in javascript code which is working perfectly.

I did a ReactJs app , with the reference of above given javascript rotate funtionality.

But in this ReactJs app, there is some problem to rotate with the handle, rotate not working properly as like javascript functionality.

Javascript rotate 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 && 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;
  })

How to make work ReactJs app as perfect as like Javascript code ...?

Thanks in Advance..!

Answer 1

Try Greensock's Draggable tool: https://greensock.com/draggable it should simplify this quite a bit and it's free.

You can create a reference to the element you want to rotate and then use it on a lifecycle method of your component such as componentDidMount to create the draggable instance.

A bit like this:

componentDidMount(){
  Draggable.create(this.refs.dragTarget,{
    type:"rotation"
  });
}

render(){
  return(
    <div>
      <h2>React & GSAP Draggable</h2>

      <div className="draggable" ref="dragTarget">Drag and rotate me</div>
    </div>
  );
}

Here's a live sample: https://codesandbox.io/s/jRKBKXEqY

---

EDIT 07-21-2017

Create rotation feature without Greensock.

Here's a live sample without using Greensock:

https://codesandbox.io/s/XDjY28XoV

Consider this just a prove of concept, since it might need more work to use touch events and be fully crossbrowser.

Honestly I'd stick with GSAP since works excellent in all browsers and devices and the file overhead of TweenLite, CSSPlugin and Draggable is minimal.