Drag and Drop Scaling 2 Column Layouts

Question

I just tried creating a scalable Drag layout using jQuery ui

http://jsfiddle.net/3zLRJ/

But my actual goal was something like this

Is it possible to do this using jQuery Ui method? or any other available plugins

Answer 1

The plugin does not support it by default, so I made the goal for you. I just encoded the div in the function for the resize event , this is for you to make it dynamic;).

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

Script example

Hope this helps!

Answer 2

Set the handles property for divs: http://jsfiddle.net/3zLRJ/5/

You will need to add code to adjust both divs when resizing, but through the resize event.

Another option is to create a third div between them, make it draggable and restrict its movement only to the side. Then adjust the divs around it in the drag event.