Docking boxes (dbx)
Version 2.05 - 3rd August 2006
Docking boxes (dbx) adds animated drag
'n' drop, snap-to-grid,
and show/hide-contents functionality to
any group of elements.
And ... in what might be
another
world-first for brothercake -
dbx is
fully accessible to the keyboard
as well as the mouse, an action I've re-dubbed press 'n' push
The script works in Opera 7.5 or later, Firefox and other mozilla browsers, Safari 1.2 or later, Konqueror 3.2 or later, and Internet Explorer 6 (with javascript enabled).
The position and state of each box is recorded to a cookie whenever it changes, and re-applied on subsequent page views, so the script's primary use is as a self-persisting behavioral add-on for websites, intranets or web-applications, wherever this kind of functionality is required.
But over and above that, events and data from the script are reported to a set of
API functions,
which allow for easy integration into more complex systems - such as using the dragable elements
as a data-input interface. In conjunction with remote procedure call scripting
(such as XMLHttpRequest) you could use the interface as a controller to
virtually any client- or server-side application: site-navigation, games,
CMS or forum administration areas,
server management CPs, webmail interfaces ...
the possibilities are endless.
Latest update
Version 2.05 is another minor update, to fix a cookie-parsing bug that could result in the final box in a group losing its state between views.
No configuration changes are required, simply replace your current
dbx.js script with the new one.
More demos
Here's another clutch of demos to highlight the major features, and suggest some ideas for possible applications:
If scripting (or this script) is not supported, you'll get the same HTML and CSS layout, but without dynamic behaviors. Therefore its use as an application interface should be restricted to situations where browser and scripting support is predictable, or where equivalent server-side functionality is also provided.
Get the script
Download the zipfile [68K] and unzip it into your site
directory. Then there are three includes to put in the
<head> section of your page -
the main dbx script,
the configuration script, and a stylesheet:
<!-- Docking boxes (dbx) by brothercake - http://www.brothercake.com/ --> <script type="text/javascript" src="dbx.js"></script> <!-- dbx configuration script --> <script type="text/javascript" src="dbx-key.js"></script> <!-- dbx stylesheet --> <link rel="stylesheet" type="text/css" href="dbx.css" media="screen, projection" />
The main "dbx.js" script is compressed (stripped of comments
and uneccesary whitespace) so that it loads and processes faster.
But the zipfile also includes a fully spaced and commented version
for reference (called "dbx[commented].js",
which you don't need to upload to your site).
How it works
The real trick here is that the underlying elements don't move - what you're holding when you drag with the mouse, and what you see moving when animation occurs, is just a temporary clone.
The original box is still there, invisible
until the drag or animation is complete, at which point
the node order is updated for real, the clone destroyed,
and the original box made visible once again
This approach worked out significantly cleaner and simpler than restyling the original boxes and creating place-holders in their wake. But more importantly, it means the script can work off elements with float or relative positioning, and having scaleable or fluid widths.
Implementing keyboard-accessible drag 'n' drop (press 'n' push
)
was actually pretty simple - the processes of re-ordering the boxes,
and the visual transitions that go with them, were already abstracted
into methods; so all I needed was a focusable element
to act as anchor, with a keypress handler to
determine the action and pass the relevant data to those methods.
dbx manual
The setup process is broken down into four steps:
Credits
Kudos to Tim Taylor for the idea of having a drag threshold - an amount by which the mouse has to move before a drag action is initiated (seen in his drag-and-drop sortable lists script). This is what makes it possible to have dragable elements which are also links.
And full vibes also to Peter Bailey, who's enthusiasm for the project helped to kick-start this round of development in the first place, way back in November ...
Discuss this page
Comments? Suggestions? Join the discussion!
![[php]](/images/php.gif "Uses PHP")