(^348) ❘ CHAPTER 13 SORTABLE
argument, which enables you tweak how sorting works, in addition to providing callback functions
that are executed during specifi c events that occur as sorting is taking place.
NOTE This section discusses just a few of the options that jQuery UI exposes
for its Sortable plugin. You can fi nd a complete list of options in Appendix K.
The fi rst option presented is placeholder, which gives you the ability to style the placeholder that
appears within a sortable list as a drag is taking place to indicate where the item will be dropped
if the mouse is released. By default (refer to Figure 13-1) you can see that the placeholder is simply
empty white space, sized relatively to the element being dragged. The placeholder option accepts a
class name as its value, which, in turn, is applied to the placeholder element.
The second option presented describes how you can customize the element being dragged; the pro-
cess for doing this can also be applied to the jQuery UI draggable() method. By default, jQuery UI
displays the element the user picked for sorting as the element that the user drags, which, of course,
makes sense for most scenarios. You do, however, have the option of using a completely different
element for display as the drag element, if you choose. Customizing the element that’s displayed
during a drag is done with the helper option. In jQuery UI, helper, as applied to drag-and-drop,
whether in the Sortable plugin or the Draggable plugin, or other plugins, is the term used for the ele-
ment that is displayed while a drag is taking place. The helper option takes two arguments: The fi rst
argument is the event object, and the second argument references the element the user picked for
sorting. Aside from completely replacing the element displayed during the drag event, you can also
use this option to simply tweak the display of the element that the user picked.
In the following example, you extend the fi le-sorting application that you created in Example 13-1,
with some options, like the placeholder and helper options that you learned about in this section.
You also add another option that gives you the ability to sort elements between multiple lists.
Using Example 13-1.html as the basis, create the following markup document as Example
13-2.html:
<!DOCTYPE HTML>
content='application/xhtml+xml; charset=utf-8' />
[http://www.it-ebooks.info](http://www.it-ebooks.info)