javascript - ReactJs 旋转功能不起作用

Question

环境:

• 操作系统:Windows 7 - 64 位

我正在尝试使用单击并拖动鼠标事件来旋转 Reactjs 中的 div，如 this javascript 代码 中的一个运行完美。

我做了一个ReactJs app ，引用上面给出的 javascript 旋转功能。

但是在这个 ReactJs 应用程序中，使用 handle 旋转时存在一些问题，旋转无法像 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代码一样完美...？

提前致谢..!

Answer 1

尝试 Greensock 的可拖动工具: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 的文件开销也很小。