Drag Re-beträchtliche 2-Spalten-Layout

Question

Ich habe gerade versucht, eine Drag Wieder ansehnliche Layout mit jQuery UI erstellen

http://jsfiddle.net/3zLRJ/

Aber mein eigentliches Ziel war es so etwas wie dieses

Ist es möglich, es mit jQuery Ui-Methode zu machen?, Oder andere Plugins verfügbar

Answer 1

Das Plugin unterstützt es nicht von defa ut, also habe ich einen Anfang gemacht, damit du das Ziel erreichst. Ich habe die Divs einfach in die Funktion für die resize event kodiert, es liegt an dir, es dynamisch zu machen;).

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

hoffe, das hilft!

Answer 2

Stellen Sie das handles Eigentum der divs: http://jsfiddle.net/3zLRJ/5/

Sie benötigen Code hinzufügen beiden divs anzupassen, wenn man, obwohl die Größe verändert wird, durch das resize Ereignis.

Eine andere Möglichkeit ist, ein drittes Div zwischen den beiden zu erstellen, machen Sie es zu einem draggable, und beschränken Sie seine Bewegung, nur Seite zu Seite zu gehen. Passen Sie dann die divs um das Ereignis drag an.