ReactJs循環功能不能正常工作

Question

環境：

• 操作系統：Windows 7 - 64位

我試圖在旋轉一個div Reactjs通過點擊並拖動鼠標事件像this一個在javascript代碼這是完美的工作。

我做了一個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應用完美的，因爲像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的文件開銷極小。