Chapter 5. Adding interaction to your interfaces
This chapter covers
- Building drag-and-drop interactions
- Sorting items in a list
- Resizing and selecting elements
- Building touch-friendly interactions
jQuery UI provides two types of widgets: the themeable widgets you’ve spent the last two chapters on, and a set of mouse-based widgets collectively known as interactions. Rather than changing the appearance of DOM elements, interactions let you perform various actions on DOM elements using the mouse. Applying the draggable widget to a DOM element, for example, lets the user drag the element around the screen using the mouse.
Despite being a different type of widget, interactions are still widgets implemented using the widget factory. The same conventions for options, methods, and events that you’ve learned still apply.
These mouse-based interactions are powerful tools when building interfaces. Suppose you need users to rank five movies from best to worst in a web form. You could provide text boxes to let users manually type in the rankings, but it’s far easier—and more intuitive—to use the mouse to rearrange the movies. The sortable widget makes this interaction possible.
One major limitation of these interactions is that they don’t currently support touch events; by default, the examples presented in this chapter don’t work on iOS or Android devices. We’ll explain why, and then look at a workaround to get touch events working in jQuery UI right now.