rotazione div con movimento del mouse

Question

Ho il seguente codice per ruotare un div. Per evento falso nell'immagine nell'angolo in alto a destra dello stesso div. Voglio che il div ruoti fino al mouse. logicamente credo che il codice sia a posto ma funziona dopo un clic. Invece di mouseup la rotazione si interrompe quando clicco su un altro oggetto. Credo che su trascinando mouse verso il basso dopo il browser tenta di trascinare l'immagine, ma ho bisogno di aiuto .. grazie in anticipo :)

fl_rotate: false, 
rotdivs: function() { 
    var pw; 
    var oThis = this; 
    $('.drop div img').mousedown(function(e) { 
     oThis.destroyDragResize(); 
     oThis.fl_rotate = true; 
     return; 
    }); 
    $(document).mousemove(function(e) { 
     if (oThis.fl_rotate) { 
      var element = $(oThis.sDiv); 
      oThis.rotateOnMouse(e, element); 
     } 
    }); 
    $(document).mouseup(function(e) { 
     if (oThis.fl_rotate) { 
      oThis.initDragResize(); 
      var ele = $(oThis.sDiv); 
      ele.unbind('mousemove'); 
      ele.draggable({ 
       containment: 'parent' 
      }); 
      ele = 0; 
      oThis.fl_rotate = false; 
     } 
    }); 
}, 
rotateOnMouse: function(e, pw) { 
    var offset = pw.offset(); 
    var center_x = (offset.left) + ($(pw).width()/2); 
    var center_y = (offset.top) + ($(pw).height()/2); 
    var mouse_x = e.pageX; 
    var mouse_y = e.pageY; 
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
    var degree = (radians * (180/Math.PI) * -1) + 100; 
    //   window.console.log("de="+degree+","+radians); 
    $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-o-transform', 'rotate(' + degree + 'deg)'); 
    $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
}​ 

Answer 1

Credo che il problema era che quando l'evento di trascinamento nativo (che ha trascinato l'immagine) è stato sparato (sul mouse) impediva l'attivazione dell'evento mouse up. Quindi devi solo impedire l'azione predefinita dell'evento del mouse.

qui si ha un esempio di lavoro:

HTML:

<div class="drop"> 
    <div> 
     <img src="http://www.belugerinstudios.com/image/picturethumbnail/FunnyCatFootballIcon.JPG"/> 
    </div> 
</div>​ 

Javascript:

$(document).ready(function() { 
    // the same as yours. 
    function rotateOnMouse(e, pw) { 
     var offset = pw.offset(); 
     var center_x = (offset.left) + ($(pw).width()/2); 
     var center_y = (offset.top) + ($(pw).height()/2); 
     var mouse_x = e.pageX; 
     var mouse_y = e.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 100; 
     //   window.console.log("de="+degree+","+radians); 
     $(pw).css('-moz-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-o-transform', 'rotate(' + degree + 'deg)'); 
     $(pw).css('-ms-transform', 'rotate(' + degree + 'deg)'); 
    } 

    $('.drop div img').mousedown(function(e) { 
    e.preventDefault(); // prevents the dragging of the image. 
    $(document).bind('mousemove.rotateImg', function(e2) { 
     rotateOnMouse(e2, $('.drop div img')); 
    }); 
    }); 

    $(document).mouseup(function(e) { 
    $(document).unbind('mousemove.rotateImg'); 
    }); 
}); 

Demo: http://jsfiddle.net/rwBku/13/

Ho usato jQuery di namespaced events così si può associare solo l'evento mousemove che vuoi.

Si prega di notare che la rotazione dell'immagine è buggata, ma non ho davvero guardato a quel metodo.

Answer 2

penso che questa domanda Stack Overflow risponde alla tua domanda How to get mouseup to fire once mousemove complete

Il trucco è quello di "ecapsulate" il MouseMove e MouseUp eventi nell'evento MouseDown.

Answer 3

C'è una lib per questo. Funziona standalone o come plugin jQuery https://github.com/PixelsCommander/Propeller