The jQuery UI Draggable plugin makes selected elements draggable by mouse.
Draggable elements gets a class of ui-draggable
. During drag the element also gets a class of ui-draggable-dragging
. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.
All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):
To manipulate the position of a draggable during drag, you can either use a wrapper as the draggable helper and position the wrapped element with absolute positioning, or you can correct internal values like so: $(this).data('draggable').offset.click.top -= x
.
$("#draggable").draggable();
<!DOCTYPE html> <html> <head> <link href="https://ajax.ingoogleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="https://ajax.ingoogleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="https://ajax.ingoogleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style type="text/css"> #draggable { width: 100px; height: 70px; background: silver; } </style> <script> $(document).ready(function() { $("#draggable").draggable(); }); </script> </head> <body style="font-size:62.5%;"> <div id="draggable">Drag me</div> </body> </html>
This event is triggered when dragging starts.
start
event as an init option.
$( ".selector" ).draggable({
start: function(event, ui) { ... }
});
start
event by type: dragstart
.
$( ".selector" ).bind( "dragstart", function(event, ui) {
...
});
This event is triggered when the mouse is moved during the dragging.
drag
event as an init option.
$( ".selector" ).draggable({
drag: function(event, ui) { ... }
});
drag
event by type: drag
.
$( ".selector" ).bind( "drag", function(event, ui) {
...
});
This event is triggered when dragging stops.
stop
event as an init option.
$( ".selector" ).draggable({
stop: function(event, ui) { ... }
});
stop
event by type: dragstop
.
$( ".selector" ).bind( "dragstop", function(event, ui) {
...
});
Remove the draggable functionality completely. This will return the element back to its pre-init state.
Disable the draggable.
Enable the draggable.
Get or set any draggable option. If no value is specified, will act as a getter.
Set multiple draggable options at once by providing an options object.
Returns the .ui-draggable element.
The jQuery UI Draggable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below.
Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is <div></div>.