ReactJs drehen Funktionalität nicht

Question

Umgebung arbeiten:

• OS: Windows 7 - 64 Bit

ich ein div in Reactjs zu drehen, ich versuche mit der Maus anklicken und Maus-Ereignis als wie this eins in JavaScript-Code, die perfekt funktioniert.

Ich habe eine ReactJs app, mit der Referenz der oben genannten Javascript Drehfunktionalität.

Aber in dieser ReactJs App gibt es ein Problem, mit dem Griff zu drehen, drehen nicht richtig funktioniert wie JavaScript-Funktionalität.

Javascript drehen Code

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

Wie Arbeit ReactJs App so perfekt wie wie Javascript-Code ... machen?

Vielen Dank im Voraus ..!

Answer 1

Versuchen Greensocks Draggable-Tool: https://greensock.com/draggable sollte es ein wenig vereinfachen und es ist kostenlos.

Sie können einen Verweis auf das Element erstellen, das Sie drehen möchten, und es dann für eine Lebenszyklusmethode Ihrer Komponente verwenden, z. B. componentDidMount, um die ziehbare Instanz zu erstellen.

Ein bisschen wie folgt aus:

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

Hier ist ein Live-Beispiel: https://codesandbox.io/s/jRKBKXEqY

---

EDIT 07-21-2017

erstellen Rotationsfunktion ohne Greensock.

Hier ist eine Live-Probe ohne Greensock mit:

https://codesandbox.io/s/XDjY28XoV

das Betrachten wir nur ein-of-Concept unter Beweis stellen, da es mehr Arbeit benötigen Berührungsereignisse zu verwenden und vollständig sein cross.

Ehrlich gesagt würde ich bei GSAP bleiben, da es in allen Browsern und Geräten funktioniert und der Datei-Overhead von TweenLite, CSSPlugin und Draggable minimal ist.