jQuery in Action
Introduction to the UI Plugin
303
If you thought we were going to pass up an opportunity for a fun lab page to dem-
onstrate these options, guess again! But before we get to that, let's take a look at
the other three methods related to draggables.
onstrate these options, guess again! But before we get to that, let's take a look at
the other three methods related to draggables.
If we want to make a draggable element no longer draggable, the
draggable-
Destroy()
command removes its draggability.
containment
(String|Object|Element) Specifies the bounds within which the draggable can be
moved. If omitted, no containment is imposed. Can be specified as the following:
moved. If omitted, no containment is imposed. Can be specified as the following:
parent--Contains the draggable within its parent so that no scrollbars need
be added to the parent
be added to the parent
document--Contains the draggable within the current document so that no
scrollbars need be added to the window
scrollbars need be added to the window
a selector--Identifies the containing element
an object--Specifies a bounding rectangle relative to the parent with the
properties left, right, top, and bottom
properties left, right, top, and bottom
effect
(Array) An array of two strings that applies a fade effect to cloned helpers.
Can be specified as ['fade','fade'], ['fade',''], or ['','fade'].
This may seem like an odd way to specify the effects, but it allows for future
support for additional effects types; currently, only fade is supported.
Can be specified as ['fade','fade'], ['fade',''], or ['','fade'].
This may seem like an odd way to specify the effects, but it allows for future
support for additional effects types; currently, only fade is supported.
grid
(Array) An array of two numbers that specify a rectangular grid defining dis-
crete locations that the draggable can be moved to--for example, [100,100].
The origin of the grid is relative to the original location of the draggable. If
omitted, no grid constraint is placed on movement.
crete locations that the draggable can be moved to--for example, [100,100].
The origin of the grid is relative to the original location of the draggable. If
omitted, no grid constraint is placed on movement.
opacity
(Number) Specifies the opacity of the dragged helper during the drag opera-
tion as a value between 0.0 and 1.0 (inclusive). If omitted, the opacity of the
dragged helper is unchanged.
tion as a value between 0.0 and 1.0 (inclusive). If omitted, the opacity of the
dragged helper is unchanged.
revert
(Boolean) If true, the draggable is moved back to its original position when
the drag operation concludes. If omitted or specified as false, the location
isn't reverted.
the drag operation concludes. If omitted or specified as false, the location
isn't reverted.
Command syntax: draggableDestroy
draggableDestroy()
Removes draggability from the elements in the wrapped set
Parameters
none
Returns
The wrapped set
The wrapped set
Table 9.2 Basic and extended options for the
draggable()
command (continued)
Name
Description