Professional jQuery

Chapter 9

jQuery UI Part II—Mouse Interactions

WHAT’S IN THIS CHAPTER?

• Dragging and Dropping Elements
• Sorting
• Resizing Elements
• Making Elements Selectable

In this chapter, you continue exploring jQuery UI features centered on moving, sorting, resizing, and selecting elements with the mouse. Different from the plugins mentioned in the previous chapter, these aren’t widgets, but rather, interesting behaviors you can add to DOM elements.

By default, divs, spans, and the like can’t be dragged across a web page or resized. You need the help of JavaScript to make these elements dynamic, and with the help of jQuery UI, it becomes a trivial issue to do these kinds of operations that were once reserved for the desktop environment.

In this chapter, you review dragging, dropping, sorting, resizing, and making elements selectable. As you’ll see, most of the details of implementing these operations are taken care of for you; yet you’re given a healthy set of options to accommodate these interactions to your needs.

DRAGGING AND DROPPING

Dragging and dropping an element usually go together. There might be moments where just dragging around an element is enough, but usually you’ll want both features. A draggable DOM element can be moved around by clicking and then moving the mouse. Droppable elements can accept draggable elements.

Dragging and dropping aren’t features that are available to web pages by default, although they are very common idioms of everyday computer use. Thankfully, jQuery ...