jQuery in Action
300
CHAPTER 9
Prominent, powerful, and practical plugins
Rich Internet Application functionality to our pages. For more details regarding
these areas, please visit http://docs.jquery.com/ui.
these areas, please visit http://docs.jquery.com/ui.
The
UI
Plugin provides three major areas of support: mouse interaction, wid-
gets, and visual effects. The drag-and-drop operations fall under the category of
mouse interaction; that's where we'll start.
mouse interaction; that's where we'll start.
9.4.1 Mouse interactions
Interacting with the mouse pointer is an integral and core part of any
GUI
.
Although many simple mouse pointer interactions are built into web interfaces
(clicking, for example), the web doesn't natively support some advanced interac-
tion styles available to desktop applications. A prime example of this deficiency is
the lack of support for drag-and-drop.
(clicking, for example), the web doesn't natively support some advanced interac-
tion styles available to desktop applications. A prime example of this deficiency is
the lack of support for drag-and-drop.
Drag-and-drop is an ubiquitous interaction technique for desktop user inter-
faces. For example, in the
GUI
file manager for any desktop system, we easily
copy files or move them around the filesystem by dragging and dropping them
from folder to folder or even delete them by dragging and dropping them onto
a Trash or Wastebasket icon. But as prevalent as this interaction style is within
desktop applications, it's as sparse in web applications, mainly because modern
browsers don't natively support drag-and-drop. Correctly implementing it is a
daunting task.
from folder to folder or even delete them by dragging and dropping them onto
a Trash or Wastebasket icon. But as prevalent as this interaction style is within
desktop applications, it's as sparse in web applications, mainly because modern
browsers don't natively support drag-and-drop. Correctly implementing it is a
daunting task.
"Daunting?" you scoff. "A few captured mouse events and some
CSS
fiddling.
What's the big deal?"
Although the high-level concepts aren't that difficult to grasp, it turns out that
implementing the nuances of drag-and-drop support, particularly in a robust
and browser-independent manner, can become painful quickly. But in the same
way that jQuery and its plugins have eased our pain before, they do so again with
support for web-enabled drag-and-drop.
and browser-independent manner, can become painful quickly. But in the same
way that jQuery and its plugins have eased our pain before, they do so again with
support for web-enabled drag-and-drop.
But before we can drag and drop, we first need to learn how to drag.
Dragging things around
Although we'd be hard-pressed to find the term draggable in most dictionaries, it's
the term that's commonly applied to items that can be dragged about in a drag-
and-drop operation. Likewise, it's the term that the
the term that's commonly applied to items that can be dragged about in a drag-
and-drop operation. Likewise, it's the term that the
UI
Plugin uses to describe
such elements and as the name of the method that applies this ability to elements
in a matched set.
in a matched set.