Draggable Panels

Panel 1

This is Panel 1's content.

Panel 2

This is Panel 2's content.

Panel 3

This is Panel 3's content.

Panel 4

This is Panel 4's content.

Panel 5

This is Panel 5's content.

Panel 6

This is Panel 6's content.

Panel 7

This is Panel 7's content.

Panel 8

This is Panel 8's content.

Panel 9

This is Panel 9's content.

Developer Notes

Draggable panels still follow the Panels pattern, but there is a handler function in ux.js and a few new CSS classes that add the new functionality. Draggable panels must be denoted by adding the class ux-drag-draggable after the ux-panl class. Potential places to drop draggable panels (called dropzones) are denoted by a class of ux-drag-dropzone. The example above uses a standard 3-column grid, with each column being a valid dropzone.