Draggable Widget version 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
false
- Boolean: If set to
true
the 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.
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()
-
This method does not accept any arguments.
Invoke the destroy method:
1
|
|
disable()
-
This method does not accept any arguments.
Invoke the disable method:
1
|
|
enable()
-
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 method does not accept any arguments.
Invoke the method:
1
|
|
option( optionName, value )
optionName
.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
1
|
|
option( options )
-
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
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
|
|