jQuery-UI Redimensionable: escalar todos los elementos de tamaño en proporcionalidad con div redimensionable

Question

Tengo un div redimensionable que se coloca sobre una selección de elementos que se han establecido en también Tamaño.

Visualmente, el elemento redimensionable es un cuadro delimitador para los elementos también de tamaño.

Quiero poder cambiar el tamaño de los elementos de tamaño en proporción a la división de tamaño variable. comportamiento predeterminado de la interfaz de usuario hace que cada elemento tenemos un fijo izquierdo y la posición superior cuando el cambio de tamaño:

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

Pero Quiero ajustar la izquierda y la parte superior de cada elemento AR a escala con el cuadro delimitador como se le cambia de tamaño.

Al principio pensé que no sería demasiada molestia al alterar el plugin tambiénResize. Esto es lo que he añadido al cambio de tamaño: _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 }); 

Como se verá, las cajas están algo:

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

Algo parece estar hinchando las figuras y no puedo descárgalo, cualquier sugerencia apreciada. Posiblemente discrepancia de decimales entre las secuencias de comandos & navegador?

Answer 1

Tal vez usted necesidad de repensar la estructura ..

Se podría insertar los .lyr elementos dentro del elemento .resizer y colocarlos en su interior con posiciones porcentuales .. De esta manera se cambiará automáticamente el tamaño, mientras que su contenedor está cambiando el tamaño. (el plugin no tiene que manejarlos)

demo enhttp://jsfiddle.net/SrPhA/65/

---

Update después de comentario

Para desacoplar el resizer de los alsoResize elementos que necesitará tomar un par de cosas en consideración para los cálculos.

• En primer lugar, es necesario utilizar las dimensiones de partida/posiciones y no la corriente de los elementos, a fin de utilizar start.width.height, etc ..
• para el posicionamiento necesita traducir el elemento al origen (en lo que respecta a la distancia desde el resizer) escala de la izquierda/superior y luego volver a traducir de nuevo a donde estaban ..

los cálculos finales se convierten en

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

Necesita un poco más de retoque para manejar el caso si escala los elementos arrastrando el lado superior o izquierdo del ajustador de escala ...

demo enhttp://jsfiddle.net/gaby/SrPhA/171/

---

Última actualización

para manejar escalamiento en todas las direcciones utilizan estos ayudantes ..

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; } 
    } 

Ejemplo de trabajo con todas las actualizaciones en http://jsfiddle.net/gaby/SrPhA/324/

Answer 2

¿Quería decir + en lugar de *?

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

tuve un poco de suerte ajustando el margen superior y margen izquierda para colocar y salir de la 'primera' y 'izquierda' Atributos en el valor predeterminado para la animación.

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