div giratorio con movimiento del mouse

Question

Tengo el siguiente código para rotar un div. Por evento de mousedown en la imagen en la esquina superior derecha de la misma div. Quiero que el div gire hasta que el mouse suba. lógicamente, creo que el código está bien, pero funciona después de un clic. En lugar de mouseup, la rotación se detiene cuando hago clic en otro elemento. Creo que el arrastre del ratón después de que el navegador intenta arrastrar la imagen, pero necesito ayuda .. gracias de antemano :)

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

Creo que el problema fue que cuando el evento de arrastre nativa (que arrastraba la imagen) fue disparado (con el mouse hacia abajo) impedía que se disparara el evento de mouse arriba. Por lo tanto, solo debe evitar la acción predeterminada del evento del mouse hacia abajo.

Aquí tienen un ejemplo de trabajo:

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

Demostración: http://jsfiddle.net/rwBku/13/

he utilizado jQuery de namespaced events por lo que sólo puede desenlazar el evento mousemove que desea.

Tenga en cuenta que la rotación de la imagen es defectuosa, pero realmente no miré ese método.

Answer 2

creo que esta pregunta desbordamiento de pila responde a su pregunta How to get mouseup to fire once mousemove complete

El truco está en "ecapsulate" la mousemove y mouseup eventos en el evento MouseDown.

Answer 3

Hay una lib para esto. Funciona de manera independiente o como complemento jQuery https://github.com/PixelsCommander/Propeller