jQuery in Action
302
CHAPTER 9
Prominent, powerful, and practical plugins
preventionDistance
(Number) The number of pixels that the mouse pointer needs to be moved
after a click for a drag operation to commence. This can be used to help pre-
vent accidental dragging. If omitted, the default is 0.
after a click for a drag operation to commence. This can be used to help pre-
vent accidental dragging. If omitted, the default is 0.
dragPrevention
(Array) An array of selectors of child elements that shouldn't initiate a drag
operation when clicked. The default is ['input','textarea','but-
ton','select','option']
operation when clicked. The default is ['input','textarea','but-
ton','select','option']
. This is useful for preventing the start of drag
operation when an embedded control is clicked, for example.
cursorAt
(Object) Specifies the spatial relationship between the mouse pointer and the
draggable object while a drag operation is under way. The specified object can
define properties of top, left, bottom or right. For example, an object
of {top:5,left:5} causes the pointer to be positioned 5 pixels from the
upper-left corner of the dragged element. If omitted, the pointer maintains its
original relative position at the point of the mouse click that initiates the drag.
draggable object while a drag operation is under way. The specified object can
define properties of top, left, bottom or right. For example, an object
of {top:5,left:5} causes the pointer to be positioned 5 pixels from the
upper-left corner of the dragged element. If omitted, the pointer maintains its
original relative position at the point of the mouse click that initiates the drag.
appendTo
(String|Element) Specifies an element that the dragged helper is appended
to at the end of the drag operation. Specifying the string parent (the default)
leaves the helper in its original hierarchy.
to at the end of the drag operation. Specifying the string parent (the default)
leaves the helper in its original hierarchy.
start
(Function) A callback function called when a drag operation starts. Its func-
tion context (this) is set to the draggable element, and it's passed two
parameters: the event instance in which the target property is set to the
draggable element and an object containing the following properties:
tion context (this) is set to the draggable element, and it's passed two
parameters: the event instance in which the target property is set to the
draggable element and an object containing the following properties:
helper
--Current helper element
position
--Object containing properties top and left, specifying the
position of the mouse at the start of the drag operation
offset
--Object specified for cursorAt
draggable
--Internal JavaScript draggable object (not very useful)
options
--Options hash used to create the draggable
stop
(Function) A callback function called when the drag operation completes. It's
passed the same two parameters as the start callback. The position
property of the second parameter reports the location of the upper-left corner
of the draggable.
passed the same two parameters as the start callback. The position
property of the second parameter reports the location of the upper-left corner
of the draggable.
drag
(Function) A callback function continuously invoked while a drag operation is
underway. It's passed the same two parameters as the start callback. The
position
underway. It's passed the same two parameters as the start callback. The
position
property of the second parameter reports the location of the
upper-left corner of the draggable.
Extended options
axis
(String) Constrains the axis along which the draggable can be moved: x for
the horizontal axis and y for the vertical axis. If omitted, no axis constraints
are imposed.
are imposed.
continued on next page
Table 9.2 Basic and extended options for the
draggable()
command (continued)
Name
Description