Beginning JavaScript® and CSS Development with jQuery

Chapter 12. Selection by Drawing a Box

In this chapter, I present the jQuery UI Selectables plugin. The Selectables plugin fills more of a niche need for UI functionality. I say that because you probably won't use this functionality very much in your applications. The functionality provided by the Selectables plugin is the ability to select elements by drawing a box, something you've probably done a few times in your operating system's file manager or a graphical editor like Photoshop.

The Selectables plugin's status as niche functionality is evident in its scant documentation on the official jQuery website at www.jquery.com and by the fact that there aren't as many customization options for this plugin as there are for the plugins covered in the previous two chapters.

Nonetheless, the Selectables plugin can be very useful, and I'll show you in this chapter at least one practical application of this plugin — a continuation of the Mac OS X Finder clone that you started in Chapter 10.

Introducing the Selectables Plugin

The Selectables plugin works similarly to the Sortables plugin that I presented in Chapter 11, and all jQuery UI plugins, as you'll have recognized by now, share a clean and consistent API that is implemented in pretty much the same way from plugin to plugin.

To make elements into Selectable elements, you call the selectable() method on any element that contains a list of elements that you want to be selectable by drawing a box with your mouse. In the following example, ...