rotierende Div mit der Maus bewegen

Question

Jun 15, 2012, 03:33 PM

rotierende Div mit der Maus bewegen

Ich habe den folgenden Code, um ein Div zu drehen. Durch Mausklick auf das Bild in der oberen rechten Ecke des gleichen Div. Ich möchte, dass sich der Div dreht, bis die Maus nach oben zeigt. logischerweise glaube ich, dass der Code in Ordnung ist, aber es funktioniert nach einem Klick. Anstatt mit der Maus zu fahren, stoppt die Drehung, wenn ich auf einen anderen Gegenstand klicke. Ich denke, nach dem Ziehen mit der Maus versucht der Browser das Bild zu ziehen, aber ich brauche Hilfe .. danke im Voraus :)

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