jQuery in Action
Introduction to the UI Plugin
309
Once an element is instrumented as a droppable, it exists in one of three states:
inactive, active, and armed.
inactive, active, and armed.
Inactive state is the droppable's normal state where it stays most of the time,
waiting to detect when a drag operation starts. When a drag starts, the droppable
determines if the draggable is a suitable element for dropping (we'll discuss the
concept of suitability in a moment) and, if so (and only if so), enters active state. In
active state, the droppable monitors the drag operation, waiting until either the
drag operation terminates, in which case the droppable returns to inactive state,
or the draggable hovers over the droppable. When a suitable draggable element
hovers over the droppable element, it enters armed state.
determines if the draggable is a suitable element for dropping (we'll discuss the
concept of suitability in a moment) and, if so (and only if so), enters active state. In
active state, the droppable monitors the drag operation, waiting until either the
drag operation terminates, in which case the droppable returns to inactive state,
or the draggable hovers over the droppable. When a suitable draggable element
hovers over the droppable element, it enters armed state.
If the drag operation terminates while the droppable is in armed state, the
draggable is considered to have been dropped onto the droppable. If the dragga-
ble continues to move so that it no longer hovers over the droppable, the drop-
pable returns to active state.
ble continues to move so that it no longer hovers over the droppable, the drop-
pable returns to active state.
Wow, that's a load of state changes to keep track of! The diagram of figure 9.11
should help you keep it all straightened out.
As with draggables, a basic set of options is available in the primary script file,
and a set of extended options is available if the additional script file is included.
Both sets of options are described in table 9.3.
Both sets of options are described in table 9.3.
When we looked at creating draggables, we saw that we could create a perfectly
serviceable draggable without specifying any options to the
draggable()
method--
not so with
droppable()
. Although nothing bad will happen if we don't specify any
options when we make a call to
droppable()
, nothing good will happen either.
A droppable created without an
accept
option does a pretty good impersonation
of a brick.
By default, a droppable won't consider any draggable suitable. And a droppa-
ble that we can't drop anything on isn't useful, is it? To create a droppable that we
Command syntax: droppable
droppable(options)
Establishes the elements in the wrapped set as droppables, or elements on which dragga-
bles can be dropped.
bles can be dropped.
Parameters
options
(Object) The options applied to the droppable elements. See table 9.3 for
details.
details.
Returns
The wrapped set.
The wrapped set.