Search within TutorialsPark

jQuery UI : Draggable Events


Learn how to use jQuery UI Draggabable Interaction Events to Callback Functions.


jQuery UI : Draggable Interaction

The jQuery UI Draggable Interaction provides a set of events that can be used as callback functions to execute the code, when certain specific events occur.

Table : jQuery UI Draggable Setting

Event Description
drag Events is triggered when the mouse moves during dragging.
start Event is Triggered when the dragging Begins
stop The Event is triggered when the dragging Stops
create Event is triggered when the draggable interaction is applied to an Element.

The callback function to make use of these events, will always recieve two arguments automatically :

1. The original event object as the first argument

2. A second object consisting of the following Properties

Property Usage
helper A jQuery Object representing the helper Element
position A nested object with properties of : top and left , i.e the position of the helper Element relative to the original drag Element.
offset A nested object with properties of : top and left

jQuery UI Draggable Interaction : Using the Start and Stop Events

jQuery UI Draggable Interaction Events of start and stop can be used to change the contents of the element while the dragging is still in progress.

In the demo, we are using HTML and CSS to modify the draggable Element when it is dragged and moved around the window

Example: jQuery UI Draggable Interaction - Callback Function using Events

Give it a TRY! » Note: Hold down the mouse over the draggable Element and then drag it around the window to see the contents change.


jQuery UI Draggable Events: Get the Current Position of the Drag Element

The jQuery UI Draggable Event of stop executes the related callback function each time a drag interaction stops.

The callback function receives the event object and ui object containing data about the draggable helper.

Example: jQuery UI Draggable - Setting the Drag Axis

Give it a TRY! » Note: The function creates two p elements and concatenates all the values related to position of helper Element.


jQuery UI Draggable : Draggable Methods

The jQuery UI Draggable Interaction does not have any unique method of its own, all common API method like , destroy, disable , enable and option

Table : jQuery UI Draggable Widget : Containment Setting Values

Method Description
draggable("destroy") To Removes the interaction from the Element.
draggable("disable") To Disable the draggable Interaction.
draggable("enable") To Enable the draggable Interaction
draggable("option") To Change one or multiple Settings