Javascript ReactJs旋转功能不工作

环境：

• 操作系统：Windows7-64位

我正在尝试使用点击并拖动鼠标事件来旋转Reactjs中的div，就像javascript代码中的div一样，它工作得非常好

我做了一个，参考上面给定的javascript旋转功能

但是在这个ReactJs应用程序中，使用句柄进行旋转存在一些问题，旋转不能像javascript功能那样正常工作

Javascript旋转代码

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;
  })

如何使ReactJs应用程序的工作与Javascript代码一样完美

---

提前谢谢

试试Greensock的Draggable工具：它可以简化这一过程，而且是免费的

您可以创建对要旋转的元素的引用，然后在组件的生命周期方法（如

componentDidMount

）上使用它来创建可拖动实例

有点像这样：

componentDidMount（）{
可拖动。创建（this.refs.dragTarget{
类型：“旋转”
});
}
render（）{
返回(
React&GSAP可拖动
拖动并旋转我
);
}

以下是一个现场样本：

---

编辑2017年7月21日

创建不带绿点的旋转特征

以下是不使用Greensock的现场样品：

考虑到这只是一个概念的证明，因为它可能需要更多的工作来使用触摸事件和完全交叉

---

老实说，我会坚持使用GSAP，因为它在所有浏览器和设备上都非常出色，TweenLite、CSSPlugin和Draggable的文件开销非常小。

我来这里是为了获得技术人员的帮助，不要泄气。我正在搜索旋转功能。。不可拖动的功能。。你的实例不起作用了，点击蓝色方块，在按住鼠标键的同时做圆周运动。正方形不会移动，而是会旋转，这就是为什么在可拖动构造函数中将

类型设置为旋转的原因。该示例在windows 647上的chrome和firefox中适用于我，谢谢Rodrigo。。好的。。。我接受你的回答。。但是我需要知道，有没有任何选项可以让work只使用React js而不使用任何其他代码（比如Greensock）来旋转div。。？
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>
  );
}