javascript 用鼠标移动旋转div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11051676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
rotating div with mouse move
提问by zzai
I have the following code to rotate a div. By mousedown event on the image in the upper-right corner of the same div. I want the div to rotate till mouse up. logically I believe the code is fine but it works after a click. Instead of mouseup the rotation stops when I click on an other item. I think on dragging after mouse down the browser tries to drag the image but I need help.. thanks in advance :)
我有以下代码来旋转 div。通过在同一 div 右上角的图像上的 mousedown 事件。我希望 div 旋转直到鼠标向上。从逻辑上讲，我相信代码很好，但单击后即可使用。当我点击另一个项目时，旋转停止而不是 mouseup。我认为在鼠标按下后拖动浏览器会尝试拖动图像，但我需要帮助.. 提前致谢:)
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)');
}?
回答by Chango
I think the problem was that when the native drag event (that dragged the image) was fired (on mouse down) it was preventing the mouse up event to be fired. So you just need to prevent the default action of the mouse down event.
我认为问题在于当原生拖动事件（拖动图像）被触发（在鼠标按下时）时，它会阻止鼠标向上事件被触发。所以你只需要阻止鼠标按下事件的默认操作。
Here you have a working example:
这里有一个工作示例：
HTML:
HTML：
<div class="drop">
<div>
<img src="http://www.belugerinstudios.com/image/picturethumbnail/FunnyCatFootballIcon.JPG"/>
</div>
</div>?
Javascript:
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/
演示：http: //jsfiddle.net/rwBku/13/
I have used jquery's namespaced eventsso you can unbind only the mousemove event that you want to.
我使用了 jquery 的命名空间事件，因此您只能解除绑定您想要的 mousemove 事件。
Please note that the rotation of the image is buggy, but I really didn't look at that method.
请注意，图像的旋转有问题，但我确实没有研究该方法。
回答by PixelCommander
There is a lib for this. Works standalone or as jQuery plugin https://github.com/PixelsCommander/Propeller
为此有一个库。独立工作或作为 jQuery 插件https://github.com/PixelsCommander/Propeller
回答by jeroenoliemans
I think this stack overflow question answers your question How to get mouseup to fire once mousemove complete
我认为这个堆栈溢出问题回答了您的问题How to get mouseup to fire 一旦 mousemove 完成
The trick is to "ecapsulate" the mousemove and mouseup events in the mousedown event.
诀窍是在 mousedown 事件中“封装” mousemove 和 mouseup 事件。
