.draggable()
Categories: UI
.draggable( [ options ] )
Plugin: jQuery.ui.draggable
Description: Apply the Draggable widget for each element in the set of matched elements
-
.draggable( [ options ] )
version added: 1.0options A map of additional options pass to the widget.
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'):
- ui.helper - the jQuery object representing the helper that's being dragged
- ui.position - current position of the helper as { top, left } object, relative to the offset element
- ui.offset - current absolute position of the helper as { top, left } object, relative to page
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
.
-
create
This event is triggered when draggable is created.
-
start
This event is triggered when dragging starts.
-
drag
This event is triggered when the mouse is moved during the dragging.
-
stop
This event is triggered when dragging stops.
-
destroy
-
.draggable( "destroy" )
version added: 1.0
Remove the draggable functionality completely. This will return the element back to its pre-init state.
-
-
disable
-
.draggable( "disable" )
version added: 1.0
Disable the draggable.
-
-
enable
-
.draggable( "enable" )
version added: 1.0
Enable the draggable.
-
-
option
-
.draggable( "option" , optionName , [value] )
version added: 1.0
Get or set any draggable option. If no value is specified, will act as a getter.
-
-
option
-
.draggable( "option" , options )
version added: 1.0
Set multiple draggable options at once by providing an options object.
-
-
widget
-
.draggable( "widget" )
version added: 1.0
Returns the .ui-draggable element.
-