Making Elements Draggable (^) ❘ 327
The preceding source code results in the document that you see in Figure 12-1.
FIGURE 12-1
In the preceding example, you created a layout of folders like that found in Mac OS X Finder. The
only difference you’ll notice between browsers is that the rounded-corner effect present on selected
folders comes through only on newer browsers, whereas older versions of IE and Opera show
square corners.
Basically, the gist of this example enables you to select a single folder at a time and drag those fold-
ers around to any position in the window.
To make the elements draggable, you included the jQuery UI library, which includes all the jQuery
UI plugins, including the Draggable plugin.
<script src='../jQueryUI.js'></script>The markup in this example is straightforward. The individual folders are all contained in the
element with the id name finderFiles; this container element is needed to assist in controlling the
presentation of the folders.
<div id='finderFiles'>Each folder resides in a container
path to the directory contained in the data-path attribute, which could then be used to implement
AJAX functionality where the path of the folder is submitted asynchronously to the server and the
server responds with the contents of that folder. Each folder has an icon and a name, so markup is
put in place for each of these. The reasoning behind this specifi c structure makes more sense after
you examine the style sheet, but you create one
tion of the icon and sets the dimensions for the highlighted style. Then the name of the folder is
contained in another
The element is used so that when the folder is highlighted, the background is applied to an
inline element, and the background hugs the text, even if the text takes up multiple lines (refer to
Figure 12-1).