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.
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:
$( ".selector" ).draggable({ addClasses: false }); |
Get or set the addClasses option, after initialization:
// gettervar addClasses = $( ".selector" ).draggable( "option", "addClasses" );// setter$( ".selector" ).draggable( "option", "addClasses", false ); |
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:
$( ".selector" ).draggable({ appendTo: "body" }); |
Get or set the appendTo option, after initialization:
// gettervar appendTo = $( ".selector" ).draggable( "option", "appendTo" );// setter$( ".selector" ).draggable( "option", "appendTo", "body" ); |
axisType: String
false
"x", "y".Initialize the draggable with the axis option specified:
$( ".selector" ).draggable({ axis: "x" }); |
Get or set the axis option, after initialization:
// gettervar axis = $( ".selector" ).draggable( "option", "axis" );// setter$( ".selector" ).draggable( "option", "axis", "x" ); |
cancelType: Selector
"input,textarea,button,select,option"
Initialize the draggable with the cancel option specified:
$( ".selector" ).draggable({ cancel: ".title" }); |
Get or set the cancel option, after initialization:
// gettervar cancel = $( ".selector" ).draggable( "option", "cancel" );// setter$( ".selector" ).draggable( "option", "cancel", ".title" ); |
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:
$( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); |
Get or set the connectToSortable option, after initialization:
// gettervar connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );// setter$( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" ); |
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:
$( ".selector" ).draggable({ containment: "parent" }); |
Get or set the containment option, after initialization:
// gettervar containment = $( ".selector" ).draggable( "option", "containment" );// setter$( ".selector" ).draggable( "option", "containment", "parent" ); |
cursorType: String
"auto"
Initialize the draggable with the cursor option specified:
$( ".selector" ).draggable({ cursor: "crosshair" }); |
Get or set the cursor option, after initialization:
// gettervar cursor = $( ".selector" ).draggable( "option", "cursor" );// setter$( ".selector" ).draggable( "option", "cursor", "crosshair" ); |
cursorAtType: Object
false
{ top, left, right, bottom }.Initialize the draggable with the cursorAt option specified:
$( ".selector" ).draggable({ cursorAt: { left: 5 } }); |
Get or set the cursorAt option, after initialization:
// gettervar cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );// setter$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } ); |
delayType: Number
0
Initialize the draggable with the delay option specified:
$( ".selector" ).draggable({ delay: 300 }); |
Get or set the delay option, after initialization:
// gettervar delay = $( ".selector" ).draggable( "option", "delay" );// setter$( ".selector" ).draggable( "option", "delay", 300 ); |
disabledType: Boolean
false
true.Initialize the draggable with the disabled option specified:
$( ".selector" ).draggable({ disabled: true }); |
Get or set the disabled option, after initialization:
// gettervar disabled = $( ".selector" ).draggable( "option", "disabled" );// setter$( ".selector" ).draggable( "option", "disabled", true ); |
distanceType: Number
1
Initialize the draggable with the distance option specified:
$( ".selector" ).draggable({ distance: 10 }); |
Get or set the distance option, after initialization:
// gettervar distance = $( ".selector" ).draggable( "option", "distance" );// setter$( ".selector" ).draggable( "option", "distance", 10 ); |
gridType: Array
false
[ x, y ].Initialize the draggable with the grid option specified:
$( ".selector" ).draggable({ grid: [ 50, 20 ] }); |
Get or set the grid option, after initialization:
// gettervar grid = $( ".selector" ).draggable( "option", "grid" );// setter$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] ); |
handleType: Selector or Element
false
Initialize the draggable with the handle option specified:
$( ".selector" ).draggable({ handle: "h2" }); |
Get or set the handle option, after initialization:
// gettervar handle = $( ".selector" ).draggable( "option", "handle" );// setter$( ".selector" ).draggable( "option", "handle", "h2" ); |
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:
$( ".selector" ).draggable({ helper: "clone" }); |
Get or set the helper option, after initialization:
// gettervar helper = $( ".selector" ).draggable( "option", "helper" );// setter$( ".selector" ).draggable( "option", "helper", "clone" ); |
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:
$( ".selector" ).draggable({ iframeFix: true }); |
Get or set the iframeFix option, after initialization:
// gettervar iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );// setter$( ".selector" ).draggable( "option", "iframeFix", true ); |
opacityType: Number
false
Initialize the draggable with the opacity option specified:
$( ".selector" ).draggable({ opacity: 0.35 }); |
Get or set the opacity option, after initialization:
// gettervar opacity = $( ".selector" ).draggable( "option", "opacity" );// setter$( ".selector" ).draggable( "option", "opacity", 0.35 ); |
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:
$( ".selector" ).draggable({ refreshPositions: true }); |
Get or set the refreshPositions option, after initialization:
// gettervar refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );// setter$( ".selector" ).draggable( "option", "refreshPositions", true ); |
revertType: Boolean or String
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.
Initialize the draggable with the revert option specified:
$( ".selector" ).draggable({ revert: true }); |
Get or set the revert option, after initialization:
// gettervar revert = $( ".selector" ).draggable( "option", "revert" );// setter$( ".selector" ).draggable( "option", "revert", true ); |
revertDurationType: Number
500
revert option is false.Initialize the draggable with the revertDuration option specified:
$( ".selector" ).draggable({ revertDuration: 200 }); |
Get or set the revertDuration option, after initialization:
// gettervar revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );// setter$( ".selector" ).draggable( "option", "revertDuration", 200 ); |
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:
$( ".selector" ).draggable({ scope: "tasks" }); |
Get or set the scope option, after initialization:
// gettervar scope = $( ".selector" ).draggable( "option", "scope" );// setter$( ".selector" ).draggable( "option", "scope", "tasks" ); |
scrollType: Boolean
true
true, container auto-scrolls while dragging.Initialize the draggable with the scroll option specified:
$( ".selector" ).draggable({ scroll: false }); |
Get or set the scroll option, after initialization:
// gettervar scroll = $( ".selector" ).draggable( "option", "scroll" );// setter$( ".selector" ).draggable( "option", "scroll", false ); |
scrollSensitivityType: Number
20
scroll option is false.Initialize the draggable with the scrollSensitivity option specified:
$( ".selector" ).draggable({ scrollSensitivity: 100 }); |
Get or set the scrollSensitivity option, after initialization:
// gettervar scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );// setter$( ".selector" ).draggable( "option", "scrollSensitivity", 100 ); |
scrollSpeedType: Number
20
scrollSensitivity distance. Ignored if the scroll option is false.Initialize the draggable with the scrollSpeed option specified:
$( ".selector" ).draggable({ scrollSpeed: 100 }); |
Get or set the scrollSpeed option, after initialization:
// gettervar scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );// setter$( ".selector" ).draggable( "option", "scrollSpeed", 100 ); |
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:
$( ".selector" ).draggable({ snap: true }); |
Get or set the snap option, after initialization:
// gettervar snap = $( ".selector" ).draggable( "option", "snap" );// setter$( ".selector" ).draggable( "option", "snap", true ); |
snapModeType: String
"both"
snap option is false. Possible values: "inner", "outer", "both".Initialize the draggable with the snapMode option specified:
$( ".selector" ).draggable({ snapMode: "inner" }); |
Get or set the snapMode option, after initialization:
// gettervar snapMode = $( ".selector" ).draggable( "option", "snapMode" );// setter$( ".selector" ).draggable( "option", "snapMode", "inner" ); |
snapToleranceType: Number
20
snap option is false.Initialize the draggable with the snapTolerance option specified:
$( ".selector" ).draggable({ snapTolerance: 30 }); |
Get or set the snapTolerance option, after initialization:
// gettervar snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );// setter$( ".selector" ).draggable( "option", "snapTolerance", 30 ); |
stackType: Selector
false
Initialize the draggable with the stack option specified:
$( ".selector" ).draggable({ stack: ".products" }); |
Get or set the stack option, after initialization:
// gettervar stack = $( ".selector" ).draggable( "option", "stack" );// setter$( ".selector" ).draggable( "option", "stack", ".products" ); |
zIndexType: Number
false
Initialize the draggable with the zIndex option specified:
$( ".selector" ).draggable({ zIndex: 100 }); |
Get or set the zIndex option, after initialization:
// gettervar zIndex = $( ".selector" ).draggable( "option", "zIndex" );// setter$( ".selector" ).draggable( "option", "zIndex", 100 ); |
Methods
destroy()
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).draggable( "destroy" ); |
disable()
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).draggable( "disable" ); |
enable()
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).draggable( "enable" ); |
option( optionName )Returns: Object
optionName.-
optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).draggable( "option", "disabled" ); |
option()Returns: PlainObject
- This method does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).draggable( "option" ); |
option( optionName, value )
optionName.-
optionNameType: StringThe name of the option to set.
-
valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).draggable( "option", "disabled", true ); |
option( options )
-
optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).draggable( "option", { disabled: true } ); |
widget()Returns: jQuery
jQuery object containing the draggable element.
- This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).draggable( "widget" ); |
Events
create( event, ui )Type: dragcreate
Initialize the draggable with the create callback specified:
$( ".selector" ).draggable({ create: function( event, ui ) {}}); |
Bind an event listener to the dragcreate event:
$( ".selector" ).on( "dragcreate", function( event, ui ) {} ); |
drag( event, ui )Type: drag
Initialize the draggable with the drag callback specified:
$( ".selector" ).draggable({ drag: function( event, ui ) {}}); |
Bind an event listener to the drag event:
$( ".selector" ).on( "drag", function( event, ui ) {} ); |
start( event, ui )Type: dragstart
Initialize the draggable with the start callback specified:
$( ".selector" ).draggable({ start: function( event, ui ) {}}); |
Bind an event listener to the dragstart event:
$( ".selector" ).on( "dragstart", function( event, ui ) {} ); |
stop( event, ui )Type: dragstop
Initialize the draggable with the stop callback specified:
$( ".selector" ).draggable({ stop: function( event, ui ) {}}); |
Bind an event listener to the dragstop event:
$( ".selector" ).on( "dragstop", function( event, ui ) {} ); |
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 | <!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>draggable demo</title> <style> #draggable { width: 100px; height: 100px; background: #ccc; } </style></head><body><div id="draggable">Drag me</div><script>$( "#draggable" ).draggable();</script></body></html> |