旋转div与鼠标移动 [英] rotating div with mouse move

问题描述

我有以下代码旋转div。通过mousedown事件在图像上的右上角的同一个div。我想要div旋转，直到鼠标。逻辑上我相信代码是很好，但它的工作后点击。而不是mouseup，旋转停止，当我点击其他项目。我想在拖动鼠标后浏览器尝试拖动图像，但我需要帮助..感谢提前：）

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 :)

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

推荐答案

这个。独立工作或作为jQuery插件 https://github.com/PixelsCommander/Propeller

There is a lib for this. Works standalone or as jQuery plugin https://github.com/PixelsCommander/Propeller

这篇关于旋转div与鼠标移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！