Making a List Sortable (^) ❘ 343
$('ul#finderCategoryFiles').sortable();
}
);
The preceding example results in the application you see shown in Figure 13-1.
FIGURE 13-1
The preceding example is a demonstration of the jQuery UI Sortable plugin, an application that pro-
vides fi le sorting, which can have a variety of applications, as mentioned just prior to presenting this
example.
In this example, you have fi ve fi les. Each has a fi le icon, a title, and a clickable link to the fi le. This is
borrowed from Mac OS X for the look and feel of an application that feels more like a native desk-
top application. If you were to extend this concept, you could also provide alternative templates that
mirror the look and feel of other operating systems as well. A server-side language that can detect
the user’s operating system, combined with different style sheets for each OS, makes that a viable
option, which can make your users feel more at home with your web-based application.
In the markup, you set things up so that the content can be styled with CSS. Each fi le item is
represented as a
the most sense to set up your sortable list as a
- element, with each list item,
- , representing
each fi le.
The fi le icon is placed in a
element. You use aso that you can provide the icon via the
CSS background property.
The text content is wrapped within an
and a
element so that you can control the mar-
gin and padding using block elements instead of inline elements like . You can see how this is