Question

环境：

操作系统：Windows 7 - 64位

我正在尝试使用点击并拖动鼠标事件来旋转 Reactjs 中的div，就像{strong> javascript代码中的this一样，这是完美的。

我做了一个ReactJs app，上面给出了javascript rotate funtionality的参考。

但是在这个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代码一样完美？

先谢谢..！

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

编辑07-21-2017

创建没有Greensock的旋转功能。

这是一个不使用Greensock的实时样本：

https://codesandbox.io/s/XDjY28XoV

认为这只是概念的证明，因为它可能需要更多的工作来使用触摸事件并且是完全交叉浏览器。

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

ReactJs旋转功能不起作用

1 个答案: