jQuery UI API - Draggable Widget

Category

Interactions

Usage

Description: Allows elements to be moved using the mouse.

Version Added: 1.0

Dependencies:

• UI Core
• Widget Factory
• Mouse Interaction

Note: Makes the selected element draggable with the mouse. If you want to drag and drop, see the jQuery UI Droppable plugin which provides a drop target for draggable elements.

Quick Navigation

Code example: Initialize draggable with specified scroll option:
$(".selector").draggable({ scroll: false });
After initialization, get or set the scroll option:
// getter
var scroll = $(".selector").draggable("option", "scroll");
// setter
$(".selector").draggable("option", "scroll", false); | true | | scrollSensitivity | Number | The distance in pixels from the viewport edge to start scrolling. The distance is relative to the pointer, not the draggable. Ignored if the scroll option is false.
Code example: Initialize draggable with specified scrollSensitivity option:
$(".selector").draggable({ scrollSensitivity: 100 });
After initialization, get or set the scrollSensitivity option:
// getter
var scrollSensitivity = $(".selector").draggable("option", "scrollSensitivity");
// setter
$(".selector").draggable("option", "scrollSensitivity", 100); | 20 | | scrollSpeed | Number | The speed at which the window scrolls when the mouse pointer is within the scrollSensitivity distance. Ignored if the scroll option is false.
Code example: Initialize draggable with specified scrollSpeed option:
$(".selector").draggable({ scrollSpeed: 100 });
After initialization, get or set the scrollSpeed option:
// getter
var scrollSpeed = $(".selector").draggable("option", "scrollSpeed");
// setter
$(".selector").draggable("option", "scrollSpeed", 100); | 20 | | snap | Boolean or Selector | Whether the element should snap to other elements.
Supports multiple types:
Boolean: When set to true, the element will snap to other draggable elements.
Selector: A selector specifying which elements to snap to.
Code example: Initialize draggable with specified snap option:
$(".selector").draggable({ snap: true });
After initialization, get or set the snap option:
// getter
var snap = $(".selector").draggable("option", "snap");
// setter
$(".selector").draggable("option", "snap", true); | false | | snapMode | String | Determines which edge of the snap element the draggable will align to. Ignored if the snap option is false. Possible values: "inner", "outer", "both".
Code example: Initialize draggable with specified snapMode option:
$(".selector").draggable({ snapMode: "inner" });
After initialization, get or set the snapMode option:
// getter
var snapMode = $(".selector").draggable("option", "snapMode");
// setter
$(".selector").draggable("option", "snapMode", "inner"); | "both" | | snapTolerance | Number | The distance from the edge of the alignment element at which alignment occurs, measured in pixels. Ignored if the snap option is false. <br> Code example: Initialize draggable with specified snapTolerance option: $( ".selector" ).draggable({ snapTolerance: 30 }); After initialization, get or set the snapTolerance option: // getter<br>var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );<br> <br>// setter<br>$( ".selector" ).draggable( "option", "snapTolerance", 30 ); | 20 | | stack | Selector | Controls the z-index of the set of elements that match the selector, always bringing the currently dragged item to the front. Useful in things like window managers. <br> Code example: Initialize draggable with specified stack option: $( ".selector" ).draggable({ stack: ".products" }); After initialization, get or set the stack option: // getter<br>var stack = $( ".selector" ).draggable( "option", "stack" );<br> <br>// setter<br>$( ".selector" ).draggable( "option", "stack", ".products" ); | false | | zIndex | Number | Z-index for the helper when dragged. <br> Code example: Initialize draggable with specified zIndex option: $( ".selector" ).draggable({ zIndex: 100 }); After initialization, get or set the zIndex option: // getter<br>var zIndex = $( ".selector" ).draggable( "option", "zIndex" );<br> <br>// setter<br>$( ".selector" ).draggable( "option", "zIndex", 100 ); | false |

| start( event, ui ) | dragstart | Triggered when dragging starts. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> helper<br> Type: jQuery<br> Description: The jQuery object representing the helper being dragged. <br> <br> position<br> Type: Object<br> Description: The current CSS position of the helper, such as { top, left } object. <br> <br> offset<br> Type: Object<br> Description: The current offset position of the helper, such as { top, left } object. Code example: Initialize draggable with the specified start callback: $( ".selector" ).draggable({<br> start: function( event, ui ) {}<br>}); Bind an event listener to the dragstart event: $( ".selector" ).on( "dragstart", function( event, ui ) {} ); |
| stop( event, ui ) | dragstop | Triggered when dragging stops. <br> event<br> Type: Event<br> <br> ui<br> Type: Object<br> <br> helper<br> Type: jQuery<br> Description: The jQuery object representing the helper being dragged. <br> <br> position<br> Type: Object<br> Description: The current CSS position of the helper, such as { top, left } object. <br> <br> offset<br> Type: Object<br> Description: The current offset position of the helper, such as { top, left } object. Code example: Initialize draggable with the specified stop callback: $( ".selector" ).draggable({<br> stop: function( event, ui ) {}<br>}); Bind an event listener to the dragstop event: $( ".selector" ).on( "dragstop", function( event, ui ) {} ); |

## Example

A simple jQuery UI Draggable Widget.

<html lang="en"> <head> <meta charset="utf-8"> <title>Draggable Widget Demo</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.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.10.4/jquery-ui.js"></script> </head> <body>

<div id="draggable">Drag me!</div>

<script> $( "#draggable" ).draggable(); </script>

</body> </html>

[View Demo](../try/tryit.php?filename=jqueryui-api-draggable)