jQuery 회전 요소 크기 조정

Question

이 문제를 해결하기 위해 탐색했지만 해결할 최종 해결책이나 예제를 찾지 못했습니다. jQuery를 사용하여 크기 조정이 가능할 때 핸들과 후속 크기 조정 작업이 실행됩니다. 이 문제를 어떻게 해결할 수 있습니까? 여기에 내가 무슨 말의 예는 다음과 같습니다 바이올린의 http://jsfiddle.net/LVU7c/

코드는 다음과 같습니다

$('#widget').resizable({ handles: 'n, e, s, w' }); 

와 CSS 간단한 div 태그를 90도 회전합니다.

Answer 1

이 기본 개념은 Linus Gudn Jokela 님이 올리신 후 답변을 삭제하고 요청에 따라 복원하지 않았습니다.

내용에 회전 된 내부 래퍼를 사용한 다음 회전하지 않은 외부 요소에 크기 조정 핸들을 첨부 할 수 있습니다.

일부 JS 코드는 높이와 너비가 관련된 한 콘텐트와 동기화 된 상태로 유지해야합니다. http://jsfiddle.net/fXthv/

JS :

$('#widget').resizable({ 
    handles: 'n, e, s, w', 
    resize: function(){ 
     correct(this); 
    } 
}); 

function correct(el) { 
    var widget = $('#widget_content'), 
     deg = widget.data("rotate"); 
    if (typeof deg == "number") { 
     widget.css({ 
      width: (function() { 
       if (deg % 180 == 0) return $(el).outerWidth() 
       else return $(el).outerHeight() 
      })(), 
      height: (function() { 
       if (deg % 180 == 0) return $(el).outerHeight() 
       else return $(el).outerWidth() 
      })(), 
      marginLeft: (function() { 
       if (deg % 360 == 90) return $(el).outerWidth(); 
       else if (deg % 360 == 180) return $(el).outerWidth(); 
       else return 0; 
       //else if (deg % 360 == 270) return $(el).outerWidth(); 
      })(), 
      marginTop: (function() { 
       if (deg % 360 == 270) return $(el).outerHeight(); 
       else if (deg % 360 == 180) return $(el).outerHeight(); 
       else return 0; 
       //else if (deg % 360 == 270) return $(el).outerWidth(); 
      })() 
     }); 
    } 
} 

CSS :

#widget { 
    width: 100px; 
    height: 100px; 
    background-color: #cecece; 
} 
#widget_content { 
    margin-left:100px; 
    width: 100px; 
    height: 100px; 
    background-image: url(http://aux.iconpedia.net/uploads/2106003206.png); 
    background-size: 100% 100%; 
    /* removing the styles below will make the image appear as expected */ 
    -webkit-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    transform:rotate(90deg); 
    -ms-transform:rotate(90deg); 
    /* IE 9 */ 
    -moz-transform:rotate(90deg); 
    /* Firefox */ 
    -webkit-transform:rotate(90deg); 
    /* Safari and Chrome */ 
    -o-transform:rotate(90deg); 
    /* Opera */ 
} 

HTML :

<div id="widget"> 
    <div id="widget_content"></div> 
</div>