13

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?

Ruby
  • 533
  • 3
  • 6
  • 16
  • Yes there are ways to do something similar with jquery. Google on jquery drag and drop – Brian Feb 01 '12 at 21:31
  • Also see related question https://stackoverflow.com/questions/21784574/a-full-page-layout-with-resizable-panes-using-jquery-ui – Stefan Dec 23 '17 at 07:47

3 Answers3

6

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.

Krishna Vedula
  • 1,643
  • 1
  • 27
  • 31
5

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.

enter image description here

xCRKx TyPHooN
  • 808
  • 5
  • 18
  • 2
    Yes, but that is just dragging and dropping in general. I'm asking if someone has already made a docking panel/window library for jQuery so that I don't have to re-invent the wheel. – Ruby Feb 02 '12 at 03:56
  • 1
    You don't have to reinvent the wheel, this will handle everything with little effort. It has snap-to-grid functionality which is perfect for docking. Alls you need to do is create a 'dockable' area and than create dockable items. – xCRKx TyPHooN Feb 02 '12 at 17:14
  • Use the control from this site. It is open source with MIT license. http://www.dockspawn.com/# – Krishna Vedula Jan 21 '16 at 08:37
  • Do you think you could edit your answer to provide a little JSFiddle example of how to do this? – Luke T O'Brien Apr 17 '19 at 10:31
0

If you are not restricted to jquery, here Is an impressive docking manager that allows to use multiple windows: http://golden-layout.com/examples/ (Try the "Open in new window" buttons)

On the FAQ page there is a list of alternative layout managers: http://golden-layout.com/faq/

Stefan
  • 10,010
  • 7
  • 61
  • 117