girando div con el movimiento del ratón
Tengo el siguiente código para rotar un div. Por evento de ratón en la imagen en la esquina superior derecha de la misma div. Quiero que el div gire hasta el mouse para arriba. Lógicamente creo que el código está bien, pero funciona después de un clic. En lugar de hacer mouseup, la rotación se detiene cuando hago clic en otro elemento. Creo que al arrastrar después del mouse hacia abajo, 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)');
}