Draggable Widgetversion added: 1.0
Description: Allow elements to be moved using the mouse.
Make the selected elements draggable by mouse. If you want not just drag, but drag & drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.
Dependencies
Options
addClassesType: Boolean
true
false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling .draggable() on hundreds of elements.Initialize the draggable with the addClasses option specified:
|
1
|
|
Get or set the addClasses option, after initialization:
|
1
2
3
4
5
|
|
appendToType: jQuery or Element or Selector or String
"parent"
- jQuery: A jQuery object containing the element to append the helper to.
- Element: The element to append the helper to.
- Selector: A selector specifying which element to append the helper to.
-
String: The string
"parent"will cause the helper to be a sibling of the draggable.
Initialize the draggable with the appendTo option specified:
|
1
|
|
Get or set the appendTo option, after initialization:
|
1
2
3
4
5
|
|
axisType: String
false
"x", "y".Initialize the draggable with the axis option specified:
|
1
|
|
Get or set the axis option, after initialization:
|
1
2
3
4
5
|
|
cancelType: Selector
"input,textarea,button,select,option"
Initialize the draggable with the cancel option specified:
|
1
|
|
Get or set the cancel option, after initialization:
|
1
2
3
4
5
|
|
connectToSortableType: Selector
false
helper option must be set to "clone" in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.Initialize the draggable with the connectToSortable option specified:
|
1
|
|
Get or set the connectToSortable option, after initialization:
|
1
2
3
4
5
|
|
containmentType: Selector or Element or String or Array
false
- Selector: The draggable element will be contained to the bounding box of the first element found by the selector. If no element is found, no containment will be set.
- Element: The draggable element will be contained to the bounding box of this element.
-
String: Possible values:
"parent","document","window". -
Array: An array defining a bounding box in the form
[ x1, y1, x2, y2 ].
Initialize the draggable with the containment option specified:
|
1
|
|
Get or set the containment option, after initialization:
|
1
2
3
4
5
|
|
cursorType: String
"auto"
Initialize the draggable with the cursor option specified:
|
1
|
|
Get or set the cursor option, after initialization:
|
1
2
3
4
5
|
|
cursorAtType: Object
false
{ top, left, right, bottom }.Initialize the draggable with the cursorAt option specified:
|
1
|
|
Get or set the cursorAt option, after initialization:
|
1
2
3
4
5
|
|
delayType: Number
0
Initialize the draggable with the delay option specified:
|
1
|
|
Get or set the delay option, after initialization:
|
1
2
3
4
5
|
|
disabledType: Boolean
false
true.Initialize the draggable with the disabled option specified:
|
1
|
|
Get or set the disabled option, after initialization:
|
1
2
3
4
5
|
|
distanceType: Number
1
Initialize the draggable with the distance option specified:
|
1
|
|
Get or set the distance option, after initialization:
|
1
2
3
4
5
|
|
gridType: Array
false
[ x, y ].Initialize the draggable with the grid option specified:
|
1
|
|
Get or set the grid option, after initialization:
|
1
2
3
4
5
|
|
handleType: Selector or Element
false
Initialize the draggable with the handle option specified:
|
1
|
|
Get or set the handle option, after initialization:
|
1
2
3
4
5
|
|
helperType: String or Function()
"original"
-
String: If set to
"clone", then the element will be cloned and the clone will be dragged. - Function: A function that will return a DOMElement to use while dragging.
Initialize the draggable with the helper option specified:
|
1
|
|
Get or set the helper option, after initialization:
|
1
2
3
4
5
|
|
iframeFixType: Boolean or Selector
false
cursorAt option, or in any case where the mouse cursor may not be over the helper.-
Boolean: When set to
true, transparent overlays will be placed over all iframes on the page. - Selector: Any iframes matching the selector will be covered by transparent overlays.
Initialize the draggable with the iframeFix option specified:
|
1
|
|
Get or set the iframeFix option, after initialization:
|
1
2
3
4
5
|
|
opacityType: Number
false
Initialize the draggable with the opacity option specified:
|
1
|
|
Get or set the opacity option, after initialization:
|
1
2
3
4
5
|
|
refreshPositionsType: Boolean
false
true, all droppable positions are calculated on every mousemove.
Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.
Initialize the draggable with the refreshPositions option specified:
|
1
|
|
Get or set the refreshPositions option, after initialization:
|
1
2
3
4
5
|
|
revertType: Boolean or String or Function()
false
-
Boolean: If set to
truethe element will always revert. -
String: If set to
"invalid", revert will only occur if the draggable has not been dropped on a droppable. For"valid", it's the other way around. -
Function: A function to determine whether the element should revert to its start position. The function must return
trueto revert the element.
Initialize the draggable with the revert option specified:
|
1
|
|
Get or set the revert option, after initialization:
|
1
2
3
4
5
|
|
revertDurationType: Number
500
revert option is false.Initialize the draggable with the revertDuration option specified:
|
1
|
|
Get or set the revertDuration option, after initialization:
|
1
2
3
4
5
|
|
scopeType: String
"default"
accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.Initialize the draggable with the scope option specified:
|
1
|
|
Get or set the scope option, after initialization:
|
1
2
3
4
5
|
|
scrollType: Boolean
true
true, container auto-scrolls while dragging.Initialize the draggable with the scroll option specified:
|
1
|
|
Get or set the scroll option, after initialization:
|
1
2
3
4
5
|
|
scrollSensitivityType: Number
20
scroll option is false.Initialize the draggable with the scrollSensitivity option specified:
|
1
|
|
Get or set the scrollSensitivity option, after initialization:
|
1
2
3
4
5
|
|
scrollSpeedType: Number
20
scrollSensitivity distance. Ignored if the scroll option is false.Initialize the draggable with the scrollSpeed option specified:
|
1
|
|
Get or set the scrollSpeed option, after initialization:
|
1
2
3
4
5
|
|
snapType: Boolean or Selector
false
-
Boolean: When set to
true, the element will snap to all other draggable elements. - Selector: A selector specifying which elements to snap to.
Initialize the draggable with the snap option specified:
|
1
|
|
Get or set the snap option, after initialization:
|
1
2
3
4
5
|
|
snapModeType: String
"both"
snap option is false. Possible values: "inner", "outer", "both".Initialize the draggable with the snapMode option specified:
|
1
|
|
Get or set the snapMode option, after initialization:
|
1
2
3
4
5
|
|
snapToleranceType: Number
20
snap option is false.Initialize the draggable with the snapTolerance option specified:
|
1
|
|
Get or set the snapTolerance option, after initialization:
|
1
2
3
4
5
|
|
stackType: Selector
false
Initialize the draggable with the stack option specified:
|
1
|
|
Get or set the stack option, after initialization:
|
1
2
3
4
5
|
|
zIndexType: Number
false
Initialize the draggable with the zIndex option specified:
|
1
|
|
Get or set the zIndex option, after initialization:
|
1
2
3
4
5
|
|
Methods
destroy()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the destroy method:
|
1
|
|
disable()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the disable method:
|
1
|
|
enable()Returns: jQuery (plugin only)
- This method does not accept any arguments.
Invoke the enable method:
|
1
|
|
option( optionName )Returns: Object
optionName.-
optionNameType: StringThe name of the option to get.
Invoke the method:
|
1
|
|
option()Returns: PlainObject
- This signature does not accept any arguments.
Invoke the method:
|
1
|
|
option( optionName, value )Returns: jQuery (plugin only)
optionName.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
|
1
|
|
option( options )Returns: jQuery (plugin only)
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
|
1
|
|
widget()Returns: jQuery
jQuery object containing the draggable element.
- This method does not accept any arguments.
Invoke the widget method:
|
1
|
|
Events
create( event, ui )Type: dragcreate
Note: The ui object is empty but included for consistency with other events.
Initialize the draggable with the create callback specified:
|
1
2
3
|
|
Bind an event listener to the dragcreate event:
|
1
|
|
drag( event, ui )Type: drag
Initialize the draggable with the drag callback specified:
|
1
2
3
|
|
Bind an event listener to the drag event:
|
1
|
|
start( event, ui )Type: dragstart
Initialize the draggable with the start callback specified:
|
1
2
3
|
|
Bind an event listener to the dragstart event:
|
1
|
|
stop( event, ui )Type: dragstop
Initialize the draggable with the stop callback specified:
|
1
2
3
|
|
Bind an event listener to the dragstop event:
|
1
|
|
Example:
A simple jQuery UI Draggable
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
|