위치 회전 div

Question

요소 (내 roomplanner에서 '가구')를 회전하고 크기를 조정하려고합니다. 모든 요소 (이미지)에 줄 바꿈이 있습니다. 이 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의 다른 위치에 다음 내부의 이미지가 ... 나는 여백으로 작업을 시도했지만 이것이 올바른 해결책이 아닌 것 같아요?

내가 설정을 예했습니다 : 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