Docking boxes (dbx) adds animated drag 'n' drop, snap-to-grid, and show/hide-contents functionality to any group of elements.
And how could I resist re-creating one of the most iconic interfaces of modern times to show it off!
The script can work with rows, columns, or two-dimensional grids of objects, of any size and shape. And as you've come to expect from brothercake, all the functionality is fully accessible to the keyboard.
Get the script
Download the zipfile [70K] and unzip it into your site directory.
There are two main includes to put in the <head> section of your page — the main dbx script, and the stylesheet:
Then if you're using either the rules engine or the remote controls, you will also need to include the relevant codebase in the <head> section; it can go anywhere after the main dbx.js script:
Finally, there's a single script include that should go at the very end of the <body> section, which is the dbx configuration script:
The configuration script contains the object constructors that configure and initialize the dbx manager, and each of the dbx groups you're using. Putting it at the end of the body is the preferred method, because this avoids the need to use any kind of load wrapper. This consequently also avoids the possibility of a flash of unsorted content, that might otherwise occur in some browsers (the momentary appearance of the boxes in their original order, before any cookie state is applied).
dbx works in the following or later browser versions: Opera 8, Firefox 2, Safari 2, Chrome, Konqueror 3, and Internet Explorer 6. To put this another way, it works in all browsers that support XMLHttpRequest.
If scripting (or this script) is not supported, you'll get the same HTML and CSS layout, but without dynamic behaviors.