jQuery ridimensionamento elementi ruotati

Question

Ho cercato questo problema ma non ho trovato una soluzione definitiva o un esempio da seguire per risolverlo. Usando jQuery, quando ruoto un ridimensionabile, i manici e le successive operazioni di ridimensionamento sono scocciati. Come posso risolvere o aggirare questo problema? Ecco un esempio di cosa sto parlando: http://jsfiddle.net/LVU7c/

Il codice nel violino è:

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

e CSS per ruotare un semplice tag div di 90 gradi.

Answer 1

Il concetto di base per questo è stato pubblicato da Linus Gudn Jokela, che ha cancellato la sua risposta, e non l'ha ripristinato nonostante la mia richiesta.

È possibile utilizzare un involucro interno ruotato per il contenuto, quindi collegare le maniglie di ridimensionamento all'elemento esterno, che rimane non ruotato.

Alcuni codici JS saranno necessari per mantenere il contenuto sincronizzato con il contenitore per quanto riguarda altezza e larghezza. Qui è una dimostrazione completa: 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>