ReactJs 旋转功能不起作用

Question

环境：

OS: Windows 7 - 64 位

我正在尝试使用单击和拖动鼠标事件在 Reactjs 中旋转一个 div，就像 [=] 中的一个 this 45=] code 运行良好。

我做了一个ReactJs app，参考上面给出的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 app像Javascript代码一样完美...?

提前致谢..！

Answer 1

试试 Greensock 的 Draggable 工具：https://greensock.com/draggable 它应该可以大大简化这个过程，而且它是免费的。

您可以创建对要旋转的元素的引用，然后在组件的生命周期方法（例如 componentDidMount 上使用它来创建可拖动实例。

有点像这样：

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

这是一个现场示例：https://codesandbox.io/s/jRKBKXEqY

编辑 2017 年 7 月 21 日

在没有 Greensock 的情况下创建旋转功能。

这是一个不使用 Greensock 的实时示例：

https://codesandbox.io/s/XDjY28XoV

考虑这只是一个概念证明，因为使用触摸事件和完全跨浏览器可能需要更多工作。

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

ReactJs 旋转功能不起作用

ReactJs rotate functionality not working

html

javascript

rotation

windows-7-x64

reactjs