jQuery in Action
Introduction to the UI Plugin
311
can drop something on, we need to specify an
accept
option that defines the
draggables that the droppable should consider suitable.
Because nothing drives home concepts like playing with them yourself, we cre-
ated a Droppables Lab. Bring up the file of chapter9/ui/lab.droppables.html, and
you'll see the display of figure 9.12.
you'll see the display of figure 9.12.
Similar to the other labs, there's a Control Panel that lets us specify the options
to be applied to the droppable after clicking the Apply button. The Disable,
activate
(Function) A callback function invoked when a drag operation for an acceptable dragga-
ble commences--when the droppable makes a transition from inactive to active state.
The function context (this) is set to the droppable element. This function is passed the
event
ble commences--when the droppable makes a transition from inactive to active state.
The function context (this) is set to the droppable element. This function is passed the
event
instance and an object that contains information about the operation with the
following properties:
draggable
--The draggable instance
droppable
--The droppable instance
element
--The draggable element
helper
--The draggable helper
options
--The options passed to droppable()
deactivate
(Function) A callback function invoked when the droppable reverts to inactive state. This
can be a transition from either active or armed state. The function context (this) is set
to the droppable element, and this function is passed the same parameters as
described for the activate callback.
can be a transition from either active or armed state. The function context (this) is set
to the droppable element, and this function is passed the same parameters as
described for the activate callback.
over
(Function) A callback function invoked when the droppable makes a transition from
active to armed state as a result of the draggable meeting the criteria defined by the
tolerance
active to armed state as a result of the draggable meeting the criteria defined by the
tolerance
option. The function context (this) is set to the droppable element, and
this function is passed the same parameters as described for the activate callback.
out
(Function) A callback function invoked when the droppable makes a transition from
armed to active state because of the draggable leaving the droppable as defined by the
criteria specified by the tolerance option. The function context (this) is set to the
droppable element, and this function is passed the same parameters as described for
the activate callback.
armed to active state because of the draggable leaving the droppable as defined by the
criteria specified by the tolerance option. The function context (this) is set to the
droppable element, and this function is passed the same parameters as described for
the activate callback.
drop
(Function) A callback function invoked when the draggable is dropped on the armed
droppable. The function context (this) is set to the droppable element, and this func-
tion is passed the same parameters as described for the activate callback.
droppable. The function context (this) is set to the droppable element, and this func-
tion is passed the same parameters as described for the activate callback.
Extended options
activeClass
(String) A CSS class name applied to the droppable when it's in active state.
hoverClass
(String) A CSS class name applied to the droppable when a suitable draggable is hover-
ing over it--when the droppable is in armed state.
ing over it--when the droppable is in armed state.
Table 9.3 Basic and extended options for the
droppable()
command (continued)
Name
Description