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
- UI Core
- Widget Factory
- Mouse Interaction
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.Code examples:
Initialize the draggable with the addClasses
option specified:
$( ".selector" ).draggable({ addClasses: false });
Get or set the addClasses
option, after initialization:
// Getter var addClasses = $( ".selector" ).draggable( "option", "addClasses" ); // Setter $( ".selector" ).draggable( "option", "addClasses", false );
"parent"
Which element the draggable helper should be appended to while dragging.
appendTo
option only works when the helper
option is set to not use the original element.Multiple types supported:
- 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.
Code examples:
Initialize the draggable with the appendTo
option specified:
$( ".selector" ).draggable({ appendTo: "body" });
Get or set the appendTo
option, after initialization:
// Getter var appendTo = $( ".selector" ).draggable( "option", "appendTo" ); // Setter $( ".selector" ).draggable( "option", "appendTo", "body" );
false
"x"
, "y"
.Code examples:
Initialize the draggable with the axis
option specified:
$( ".selector" ).draggable({ axis: "x" });
Get or set the axis
option, after initialization:
// Getter var axis = $( ".selector" ).draggable( "option", "axis" ); // Setter $( ".selector" ).draggable( "option", "axis", "x" );
"input,textarea,button,select,option"
Code examples:
Initialize the draggable with the cancel
option specified:
$( ".selector" ).draggable({ cancel: ".title" });
Get or set the cancel
option, after initialization:
// Getter var cancel = $( ".selector" ).draggable( "option", "cancel" ); // Setter $( ".selector" ).draggable( "option", "cancel", ".title" );
false
helper
option must be set to "clone"
in order to work flawlessly. Requires the jQuery UI Sortable plugin to be included.Code examples:
Initialize the draggable with the connectToSortable
option specified:
$( ".selector" ).draggable({ connectToSortable: "#my-sortable" });
Get or set the connectToSortable
option, after initialization:
// Getter var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" ); // Setter $( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" );
false
Multiple types supported:
- 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 ]
.
Code examples:
Initialize the draggable with the containment
option specified:
$( ".selector" ).draggable({ containment: "parent" });
Get or set the containment
option, after initialization:
// Getter var containment = $( ".selector" ).draggable( "option", "containment" ); // Setter $( ".selector" ).draggable( "option", "containment", "parent" );
"auto"
Code examples:
Initialize the draggable with the cursor
option specified:
$( ".selector" ).draggable({ cursor: "crosshair" });
Get or set the cursor
option, after initialization:
// Getter var cursor = $( ".selector" ).draggable( "option", "cursor" ); // Setter $( ".selector" ).draggable( "option", "cursor", "crosshair" );
false
{ top, left, right, bottom }
.Code examples:
Initialize the draggable with the cursorAt
option specified:
$( ".selector" ).draggable({ cursorAt: { left: 5 } });
Get or set the cursorAt
option, after initialization:
// Getter var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" ); // Setter $( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );
0
Code examples:
Initialize the draggable with the delay
option specified:
$( ".selector" ).draggable({ delay: 300 });
Get or set the delay
option, after initialization:
// Getter var delay = $( ".selector" ).draggable( "option", "delay" ); // Setter $( ".selector" ).draggable( "option", "delay", 300 );
false
true
.Code examples:
Initialize the draggable with the disabled
option specified:
$( ".selector" ).draggable({ disabled: true });
Get or set the disabled
option, after initialization:
// Getter var disabled = $( ".selector" ).draggable( "option", "disabled" ); // Setter $( ".selector" ).draggable( "option", "disabled", true );
1
Code examples:
Initialize the draggable with the distance
option specified:
$( ".selector" ).draggable({ distance: 10 });
Get or set the distance
option, after initialization:
// Getter var distance = $( ".selector" ).draggable( "option", "distance" ); // Setter $( ".selector" ).draggable( "option", "distance", 10 );
false
[ x, y ]
.Code examples:
Initialize the draggable with the grid
option specified:
$( ".selector" ).draggable({ grid: [ 50, 20 ] });
Get or set the grid
option, after initialization:
// Getter var grid = $( ".selector" ).draggable( "option", "grid" ); // Setter $( ".selector" ).draggable( "option", "grid", [ 50, 20 ] );
false
Code examples:
Initialize the draggable with the handle
option specified:
$( ".selector" ).draggable({ handle: "h2" });
Get or set the handle
option, after initialization:
// Getter var handle = $( ".selector" ).draggable( "option", "handle" ); // Setter $( ".selector" ).draggable( "option", "handle", "h2" );
"original"
Multiple types supported:
- 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.
Code examples:
Initialize the draggable with the helper
option specified:
$( ".selector" ).draggable({ helper: "clone" });
Get or set the helper
option, after initialization:
// Getter var helper = $( ".selector" ).draggable( "option", "helper" ); // Setter $( ".selector" ).draggable( "option", "helper", "clone" );
false
cursorAt
option, or in any case where the mouse cursor may not be over the helper.Multiple types supported:
- 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.
Code examples:
Initialize the draggable with the iframeFix
option specified:
$( ".selector" ).draggable({ iframeFix: true });
Get or set the iframeFix
option, after initialization:
// Getter var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" ); // Setter $( ".selector" ).draggable( "option", "iframeFix", true );
false
Code examples:
Initialize the draggable with the opacity
option specified:
$( ".selector" ).draggable({ opacity: 0.35 });
Get or set the opacity
option, after initialization:
// Getter var opacity = $( ".selector" ).draggable( "option", "opacity" ); // Setter $( ".selector" ).draggable( "option", "opacity", 0.35 );
false
true
, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance. Code examples:
Initialize the draggable with the refreshPositions
option specified:
$( ".selector" ).draggable({ refreshPositions: true });
Get or set the refreshPositions
option, after initialization:
// Getter var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" ); // Setter $( ".selector" ).draggable( "option", "refreshPositions", true );
false
Multiple types supported:
- 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. - Function: A function to determine whether the element should revert to its start position. The function must return
true
to revert the element.
Code examples:
Initialize the draggable with the revert
option specified:
$( ".selector" ).draggable({ revert: true });
Get or set the revert
option, after initialization:
// Getter var revert = $( ".selector" ).draggable( "option", "revert" ); // Setter $( ".selector" ).draggable( "option", "revert", true );
500
revert
option is false
.Code examples:
Initialize the draggable with the revertDuration
option specified:
$( ".selector" ).draggable({ revertDuration: 200 });
Get or set the revertDuration
option, after initialization:
// Getter var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" ); // Setter $( ".selector" ).draggable( "option", "revertDuration", 200 );
"default"
accept
option. A draggable with the same scope
value as a droppable will be accepted by the droppable.Code examples:
Initialize the draggable with the scope
option specified:
$( ".selector" ).draggable({ scope: "tasks" });
Get or set the scope
option, after initialization:
// Getter var scope = $( ".selector" ).draggable( "option", "scope" ); // Setter $( ".selector" ).draggable( "option", "scope", "tasks" );
true
true
, container auto-scrolls while dragging.Code examples:
Initialize the draggable with the scroll
option specified:
$( ".selector" ).draggable({ scroll: false });
Get or set the scroll
option, after initialization:
// Getter var scroll = $( ".selector" ).draggable( "option", "scroll" ); // Setter $( ".selector" ).draggable( "option", "scroll", false );
20
scroll
option is false
.Code examples:
Initialize the draggable with the scrollSensitivity
option specified:
$( ".selector" ).draggable({ scrollSensitivity: 100 });
Get or set the scrollSensitivity
option, after initialization:
// Getter var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" ); // Setter $( ".selector" ).draggable( "option", "scrollSensitivity", 100 );
20
scrollSensitivity
distance. Ignored if the scroll
option is false
.Code examples:
Initialize the draggable with the scrollSpeed
option specified:
$( ".selector" ).draggable({ scrollSpeed: 100 });
Get or set the scrollSpeed
option, after initialization:
// Getter var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" ); // Setter $( ".selector" ).draggable( "option", "scrollSpeed", 100 );
false
Multiple types supported:
- Boolean: When set to
true
, the element will snap to all other draggable elements. - Selector: A selector specifying which elements to snap to.
Code examples:
Initialize the draggable with the snap
option specified:
$( ".selector" ).draggable({ snap: true });
Get or set the snap
option, after initialization:
// Getter var snap = $( ".selector" ).draggable( "option", "snap" ); // Setter $( ".selector" ).draggable( "option", "snap", true );
"both"
snap
option is false
. Possible values: "inner"
, "outer"
, "both"
.Code examples:
Initialize the draggable with the snapMode
option specified:
$( ".selector" ).draggable({ snapMode: "inner" });
Get or set the snapMode
option, after initialization:
// Getter var snapMode = $( ".selector" ).draggable( "option", "snapMode" ); // Setter $( ".selector" ).draggable( "option", "snapMode", "inner" );
20
snap
option is false
.Code examples:
Initialize the draggable with the snapTolerance
option specified:
$( ".selector" ).draggable({ snapTolerance: 30 });
Get or set the snapTolerance
option, after initialization:
// Getter var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" ); // Setter $( ".selector" ).draggable( "option", "snapTolerance", 30 );
false
Code examples:
Initialize the draggable with the stack
option specified:
$( ".selector" ).draggable({ stack: ".products" });
Get or set the stack
option, after initialization:
// Getter var stack = $( ".selector" ).draggable( "option", "stack" ); // Setter $( ".selector" ).draggable( "option", "stack", ".products" );
false
Code examples:
Initialize the draggable with the zIndex
option specified:
$( ".selector" ).draggable({ zIndex: 100 });
Get or set the zIndex
option, after initialization:
// Getter var zIndex = $( ".selector" ).draggable( "option", "zIndex" ); // Setter $( ".selector" ).draggable( "option", "zIndex", 100 );
- This method does not accept any arguments.
Invoke the destroy method:
$( ".selector" ).draggable( "destroy" );
- This method does not accept any arguments.
Invoke the disable method:
$( ".selector" ).draggable( "disable" );
- This method does not accept any arguments.
Invoke the enable method:
$( ".selector" ).draggable( "enable" );
Retrieves the draggable's instance object. If the element does not have an associated instance, undefined
is returned.
Unlike other widget methods, instance()
is safe to call on any element after the draggable plugin has loaded.
- This method does not accept any arguments.
Invoke the instance method:
$( ".selector" ).draggable( "instance" );
Gets the value currently associated with the specified optionName
.
Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar"
would get the value of the bar
property on the foo
option.
- optionNameType: StringThe name of the option to get.
Invoke the method:
var isDisabled = $( ".selector" ).draggable( "option", "disabled" );
- This signature does not accept any arguments.
Invoke the method:
var options = $( ".selector" ).draggable( "option" );
Sets the value of the draggable option associated with the specified optionName
.
Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName
. For example, "foo.bar"
would update only the bar
property of the foo
option.
- optionNameType: StringThe name of the option to set.
- valueType: ObjectA value to set for the option.
Invoke the method:
$( ".selector" ).draggable( "option", "disabled", true );
- optionsType: ObjectA map of option-value pairs to set.
Invoke the method:
$( ".selector" ).draggable( "option", { disabled: true } );
jQuery
object containing the draggable element. - This method does not accept any arguments.
Invoke the widget method:
var widget = $( ".selector" ).draggable( "widget" );
dragcreate
Note: The ui
object is empty but included for consistency with other events.
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
- eventType: Event
- uiType: Object
- helperType: jQueryThe jQuery object representing the helper that's being dragged.
- positionType: ObjectCurrent CSS position of the helper as
{ top, left }
object. The values may be changed to modify where the element will be positioned. This is useful for custom containment, snapping, etc. - offsetType: ObjectCurrent offset position of the helper as
{ top, left }
object.
-
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 ) {} );
Constrain movement via ui.position
:
$( ".selector" ).draggable({ drag: function( event, ui ) { // Keep the left edge of the element // at least 100 pixels from the container ui.position.left = Math.min( 100, ui.position.left ); } });
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 ) {} );
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 ) {} );
A simple jQuery UI Draggable
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>draggable demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> </head> <body> <div id="draggable">Drag me</div> <script> $( "#draggable" ).draggable(); </script> </body> </html>
Please login to continue.