jQuery-UI Ridimensionabile: ridimensiona tutto anche Ridimensiona elementi in proporzione con div ridimensionabile

Question

Ho un div ridimensionabile che è posizionato su una selezione di elementi che sono stati impostati anche su Ridimensiona.

Visivamente, l'elemento ridimensionabile è un riquadro di delimitazione per gli elementi anche Ridimensiona.

Desidero poter ridimensionare anche gli elementi Ridimensiona in proporzione del div ridimensionabile. il comportamento predefinito di interfaccia utente rende ogni elemento hanno un fisso a sinistra e prima posizione quando si ridimensiona:

http://jsfiddle.net/digitaloutback/SrPhA/2/

Ma io voglio regolare la sinistra e in alto di ogni elemento AR in scala con il rettangolo di selezione come è ridimensionata.

Inizialmente ho pensato che non sarebbe stato troppo complicato alterare il plugin alsoResize. Questo è quello che ho aggiunto al ridimensionamento: _alsoResize:

// Get the multipliers 
var scaleX = self.size.width/os.width; 
var scaleY = self.size.height/os.height; 

newElW = (parseInt(el.css('width')) * scaleX); 
newElH = (parseInt(el.css('height')) * scaleY); 
newElL = (parseInt(el.css('left')) * scaleX); 
newElT = (parseInt(el.css('top')) * scaleY); 

el.css({ width: newElW, height: newElH, left: newElL, top: newElT }); 

Come vedrete, le caselle di ritardo un po ':

http://jsfiddle.net/digitaloutback/SrPhA/4/

Qualcosa sembra essere ballooning figure e non riesco a capirlo, ogni suggerimento apprezzato. Possibile discrepanza tra le cifre decimali tra gli script del browser &?

Answer 1

Forse avete bisogno di ripensare la struttura ..

Si potrebbe inserire i .lyr elementi all'interno dell'elemento .resizer e posizionarli all'interno di esso con le posizioni percentuali .. questo modo potranno ridimensionare automaticamente mentre il loro contenitore sta cambiando dimensioni. (il plugin non deve gestirli)

demohttp://jsfiddle.net/SrPhA/65/

---

aggiornamento dopo il commento

di disaccoppiare il resizer dalle alsoResize elementi che si sarà necessario prendere in considerazione un paio di cose per i calcoli.

• primo luogo, è necessario utilizzare le dimensioni/posizioni di partenza e non la corrente degli elementi, in modo da utilizzare start.width.height ecc ..
• per il posizionamento è necessario tradurre l'elemento all'origine (in riguarda piedi dal resizer) scala sinistra/alto e poi ritradurre torna a dove erano ..

i calcoli finali diventano

newElW = start.width * scaleX; 
newElH = start.height * scaleY; 
newElL = ((start.left - op.left) * scaleX) + op.left; 
newElT = ((start.top - op.top) * scaleY) + op.top ; 

Ha bisogno di un po 'più di armeggiare per gestire il caso in cui si scala gli elementi trascinando il lato superiore o sinistro del resizer ..

demohttp://jsfiddle.net/gaby/SrPhA/171/

---

Ultimo aggiornamento

per gestire il ridimensionamento in tutte le direzioni usano questi aiutanti ..

utils: { 
     west: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left + delta.left}, 
     east: function(start, op, scale, delta) {return ((start.left - op.left) * scale) + op.left;}, 
     south: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top; }, 
     north: function(start, op, scale, delta){return ((start.top - op.top) * scale) + op.top + delta.top; } 
    } 

esempio Lavorare con tutti gli aggiornamenti a http://jsfiddle.net/gaby/SrPhA/324/

Answer 2

Intendevi utilizzare + anziché *?

newElW = (parseInt(el.css('width')) + scaleX); 
newElH = (parseInt(el.css('height')) + scaleY); 
newElL = (parseInt(el.css('left')) + scaleX); 
newElT = (parseInt(el.css('top')) + scaleY); 

Answer 3

ho avuto un po 'di fortuna impostando il margin-top e margin-left per il posizionamento e lasciando il 'top' e 'sinistra' Attributi a predefinita per l'animazione.

http://jsfiddle.net/SrPhA/97/