How to make drag-and-drop docking panels?

Question

I would like to have dockable panels using jquery that behave much like the ones in Visual Studio. Mainly, I just want to be able to drag and drop panels to any side of the screen. Tabs, floating windows, and auto-hide panels are not necessary. When two or more panels are dropped on to the same side, they should share the space on that side of the screen. The user should be able to resize the panels.

Is there a jQuery and/or jQuery UI plugin that can do this? Or maybe a tutorial?

Answer 1

You can use Jquery UI to accomplish all of this.

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

Below is an example of a drag and drop page I made.

Answer 2

I've used the jQuery UI Layout which provides all of the functionality except the drag-drop and since this rides on top of jQuery we can use jQuery UI drag-drop as needed.

jQuery UI Layout

I recently found out this new control which is what need exactly.

http://www.dockspawn.com/#

Another layout manager worth looking at

https://github.com/WebCabin/wcDocker

we are using this one of our projects and it is quite helpful.

Most Recently I found lobiPanel, and I've used that to create a fantastic looking portal. I'm loving it.