Arrastre diseño de 2 columnas Re-considerable

Question

que acaba de intentar crear un diseño de arrastrar re-grande con jQuery UI

http://jsfiddle.net/3zLRJ/

Pero mi objetivo real era algo como esto

¿Es posible hacerlo con el método jQuery Ui? O con cualquier otro complemento disponible

Answer 1

El complemento no lo admite por defecto Ult, así que comencé a lograr el objetivo. Acabo de codificar los div's en la función para el resize event, depende de ti que sea dinámico;).

var total_width = 500; 

$("#div1").resizable({ 
    grid: [1, 10000] 
}).bind("resize", resize_other); 


function resize_other(event, ui) { 
    var width = $("#div1").width(); 

    if(width > total_width) { 
     width = total_width; 

     $('#div1').css('width', width); 
    } 

    $('#div2').css('width', (total_width - width)); 
}​ 

Fiddle example

Espero que esto ayude!

Answer 2

establecer la propiedad handles de los divs: http://jsfiddle.net/3zLRJ/5/

Usted tendrá que añadir código para ajustar tanto divs cuando uno se está cambiando el tamaño, sin embargo, a través del evento resize.

Otra opción es crear un tercer div entre los dos, hacerlo un draggable, y restringir su movimiento para que solo vaya de un lado a otro. A continuación, ajuste los divs que lo rodean en el evento drag.