用鼠标移动旋转div
我有以下代码来旋转div。 通过mousedown事件在同一div的右上角的图像上。 我希望div旋转直到鼠标向上。 从逻辑上讲，我相信代码很好，但点击后它才有效。 当我点击其他项目时，旋转停止，而不是鼠标。 我认为在拖动鼠标后拖动浏览器尝试拖动图像但我需要帮助..在此先感谢:)
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)'); } 我认为问题在于当本机拖动事件（拖动图像）被触发时（在鼠标按下时），它阻止了鼠标向上事件被触发。 因此，您只需要阻止鼠标按下事件的默认操作。
这里有一个有效的例子：
HTML：
使用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'); }); });
演示： http ： //jsfiddle.net/rwBku/13/
我使用了jquery的命名空间事件，因此您只能取消绑定您想要的mousemove事件。
请注意，图像的旋转是错误的，但我真的没有看那个方法。
这有一个lib。 独立工作或作为jQuery插件https://github.com/PixelsCommander/Propeller
我认为这个堆栈溢出问题可以解答你的问题一旦mousemove完成，如何让mouseup启动
诀窍是在mousedown事件中“ecapsulate”mousemove和mouseup事件。