Javascript 使用鼠标移动旋转div
我有下面的代码来旋转一个div。通过mousedown事件在同一个div的右上角的图像上旋转。我希望div旋转到鼠标向上。从逻辑上讲,我相信代码是好的,但它在点击后工作。当我单击其他项目时,旋转停止,而不是鼠标悬停。我想在鼠标按下后拖动浏览器试图拖动图像,但我需要帮助。。提前感谢:)Javascript 使用鼠标移动旋转div,javascript,jquery,jquery-ui,css,Javascript,Jquery,Jquery Ui,Css,我有下面的代码来旋转一个div。通过mousedown事件在同一个div的右上角的图像上旋转。我希望div旋转到鼠标向上。从逻辑上讲,我相信代码是好的,但它在点击后工作。当我单击其他项目时,旋转停止,而不是鼠标悬停。我想在鼠标按下后拖动浏览器试图拖动图像,但我需要帮助。。提前感谢:) 我认为问题在于,当启动本机拖动事件(拖动图像)时(在鼠标按下时),会阻止启动鼠标向上事件。因此,您只需要防止鼠标按下事件的默认操作 这里有一个工作示例: HTML: 演示: 我已经使用了jquery,因此您可以只解
我认为问题在于,当启动本机拖动事件(拖动图像)时(在鼠标按下时),会阻止启动鼠标向上事件。因此,您只需要防止鼠标按下事件的默认操作 这里有一个工作示例: HTML: 演示: 我已经使用了jquery,因此您可以只解除您想要的mousemove事件的绑定
请注意,图像的旋转有问题,但我确实没有考虑这种方法。我认为这个堆栈溢出问题回答了您的问题
诀窍是在mousedown事件中“ecapsulate”mousemove和mouseup事件。有一个用于此的库。独立工作或作为jQuery插件工作您可以创建一个示例吗?您发布了所有相关代码吗?您可以控制台。记录事件以查看它们是否在您认为应该发生的时候发生?从您所写的内容中,我了解到第一次mousedown事件仅在单击后触发,随后第二次单击激活mouseup事件,该事件禁用旋转,因为fl_rotate设置为true。然而,这听起来像是mouseup事件在mousedown之前触发?!?
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)');
}
<div class="drop">
<div>
<img src="http://www.belugerinstudios.com/image/picturethumbnail/FunnyCatFootballIcon.JPG"/>
</div>
</div>
$(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');
});
});