jQuery in Action
Introduction to the UI Plugin
301
We must include at least the two following files to use the
draggable()
command
(in addition to the core jQuery script file):
ui.mouse.js
ui.draggable.js
ui.draggable.js
To obtain extended options, we also include the following:
ui.draggable.ext.js
The options, both basic and extended, supported by this method are shown in
table 9.2.
table 9.2.
Command syntax: draggable
draggable(options)
Makes the elements in the wrapped set draggable according to the specified options.
Parameters
options
(Object) An object hash of the options to be applied to the draggable elements,
as described in table 9.2. With no options specified, the elements are freely
draggable anywhere within the window.
as described in table 9.2. With no options specified, the elements are freely
draggable anywhere within the window.
Returns
The wrapped set.
The wrapped set.
Table 9.2 Basic and extended options for the
draggable()
command
Name
Description
Basic options
helper
(String|Function) Specifies exactly what is to be dragged. If specified as origi-
nal (the default), the original item is dragged. If clone is specified, a copy of
the element is created for dragging. You can also specify a function that
accepts the original DOM element as its parameter and returns an element to
be dragged. This is most often a clone of the original element with a transfor-
mation of some type applied--for example, function(e){return
$(e).clone().css('color','green')}
nal (the default), the original item is dragged. If clone is specified, a copy of
the element is created for dragging. You can also specify a function that
accepts the original DOM element as its parameter and returns an element to
be dragged. This is most often a clone of the original element with a transfor-
mation of some type applied--for example, function(e){return
$(e).clone().css('color','green')}
.
ghosting
(Boolean) If true, a synonym for helper:'clone'.
handle
(jQuery|Element) An alternate element, or jQuery wrapped set containing an
element, that serves as the drag handle--the item clicked on to initiate the
drag operation. This element is frequently a child element of the draggable
but can be any element on the page.
element, that serves as the drag handle--the item clicked on to initiate the
drag operation. This element is frequently a child element of the draggable
but can be any element on the page.
continued on next page