jquery - 位置旋转的div

Question

我正在尝试旋转和调整元素(我的房间规划器中的“家具”)。 每个元素(图像)都有一个 div 包装。这个 div 是可拖动的，图像可以旋转。在我用来调整大小的图像周围有第二个 div。

<div class="element furniture" height="53" width="146">
    <div class="imageholder">
        <img width="146" height="53" src="/images/furniture/bankstel_3zits.png" />
    </div>
</div>

旋转后，我将 div 的高度设置为图像的宽度，将 div 的宽度设置为图像的高度。但是，当我旋转时，div 位于另一个位置，然后是内部图像。我尝试使用边距，但我想这不是正确的解决方案？

我已经设置了一个例子: http://jsfiddle.net/Hqcnh/6/

Answer 1

旋转父div，其他一切都会旋转

$(document).ready(function () {
    $('.rotate').click(function () {
       Rotate();

    });
    function Rotate(){
         var clickedElement = $('.element.furniture');
        var imageHolder = clickedElement.find('.imageholder');
        var clickedElementToRotate = $('.element.furniture');

        var degrees = 90;
        if (typeof (clickedElementToRotate.attr('rotate')) !== 'undefined') {
            degrees = parseFloat(clickedElementToRotate.attr('rotate')) + 90;
        }

        clickedElementToRotate.attr('rotate', degrees);
        clickedElementToRotate.cssrotate(degrees);

        if (degrees == 90 || degrees == 270) {
            clickedElementToRotate.attr('data-width', clickedElementToRotate.height()).attr('data-height', clickedElementToRotate.width());
        } else {
            clickedElementToRotate.attr('data-width', clickedElementToRotate.width()).attr('data-height', clickedElementToRotate.height());
        }



    }
    $("div.element.furniture").each(function () {
        var div = $(this);
        var img = $(this).find('img');

        div.draggable();
        div.css('border', '1px solid red');
        div.width(img.width());
        div.height(img.height());

        img.wrap('<div class="imageholder" />');
        div.find('.imageholder').css('border', '1px solid blue').css('width', div.width());
        div.find('.imageholder').css('height', div.height());

        div.find('.imageholder').resizable({
            handles: "n, e, s, w",
            aspectRatio: true,
            resize: function (event, ui) {

                if (img.attr('rotate') == 90 || img.attr('rotate') == 270) {
                    img.css('width', ui.size.height);
                    img.css('height', ui.size.width);
                } else {
                    img.css('width', ui.size.width);
                    img.css('height', ui.size.height);
                }

                div.css('width', ui.size.width);
                div.css('height', ui.size.height);
            }
        });
    });
});


(function ($) {
    var _e = document.createElement("canvas").width;
    $.fn.cssrotate = function (d) {
        return this.css({
            '-moz-transform': 'rotate(' + d + 'deg)',
                '-webkit-transform': 'rotate(' + d + 'deg)',
                '-o-transform': 'rotate(' + d + 'deg)',
                '-ms-transform': 'rotate(' + d + 'deg)'
        }).prop("rotate", _e ? d : null);
    };
    var $_fx_step_default = $.fx.step._default;
    $.fx.step._default = function (fx) {
        if (fx.prop != "rotate") return $_fx_step_default(fx);
        if (typeof fx.elem.rotate == "undefined") fx.start = fx.elem.rotate = 0;
        $(fx.elem).cssrotate(fx.now);
    };
})(jQuery);

在这里查看这个 fiddle FIDDLE