Search within TutorialsPark

jQuery UI : Draggable Widget


Learn how to use jQuery UI Draggabable Interaction to transform elements into drag and drop items.


jQuery UI : Draggable Interaction

The jQuery UI Draggable Interaction API is used to transform the specified Element into an item which can be picked up using the mouse pointer and then dragged around the Webpage.

Similar to it is the jQuery UI Droppable API which allows you to specify a section/region on the page where the draggable items can be dropped, multiple types of events are fired at different stages of the process. Eg Adding items to an Online Shopping Cart

Draggables and Droppables goes parallel to each other, when one is present the other is need to complete it. Since dragging an element is worthless is it cannot be dropped somewhere.

In this Section we will confine ourself to draggables only.


jQuery UI Draggable Interaction : Creating a Draggable Interaction

jQuery UI Tooltip Draggable Widget can be applied to an Element in the Document by applying the method draggable() to it.

The use of method draggable on an Element transforms the Element into an item which can eb draggec around the browser 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 move the mouse pointer around the window in that state.


jQuery UI Draggable : Configuring the Draggable Interaction

Table : jQuery UI Draggable Setting

Setting Description
addClasses To add the class ui-draggable to the drag object, a value false prevents this class from being added. Default value is true
appendTo To define a container element for draggable object with a helper attached. Default value is parent
axis To restrict the direction of Drag. The default value is false, i.e no restriction, the value x means X axis and y means Y axis
cancel to prevent the specified elements from begin dragged, the elements are selected using a selector. Default value is "input, option"
connectToSortable To allow the dragged object to be dropped on a sortable list and transfrom into one of the sort element. Default value is false
containment To restrict the dragged item within a region on screen.The default value is false , which means no restriction.
cursor To specify a CSS cursor to be used while the mouse pointer hovers over the draggable object. Default value is auto
cursorAt To define the default position of the cursor relative to the drag Object, while it is dragged.Default Value is false
delay To set the duration for which the user must drag the element before it moves.The default value is 0, i.e no meaning
disabled To Disable dragging on the draggable Object
distance To define the distance in pixels that the pointer should move with the mouse button pressed downwards on the drag object, before the dragging Begins.
grid To make the object dragged to snap to an imaginary grid on the page. The value is an array of X and Y pixel values. Default value is false
handle To set a specific area of on the drag object which can be used to hold the pointer on, and then drag. Default value is false
helper To define a pseudo-drag Element which is to be dragged instead of the original Element. Default Value is original
iframePix To stop the iframe Elements on the page to capture mouse Events, while the dragging is still in progress. Default value is iframePix
opacity To set the opacity of the helper Element.Default value is false
refreshPositions To calculate the position of the drag object while the dragging is in progress. Default Value is false
revert To make the drag object to return to its starting position once the dragging is over, when set to true. Default value is false
revertDuration to specify the number of milliseconds for the drag object to return back to its starting position.Default Value is 500
scope to set the scope of the drag object relative to the drag object valid for it. Default value is default
scroll To make the viewport scroll automatically when the drag object moves within the threshold of viewport Edge.Default Value is true
scrollSensitivity To specify in terms of pixels how close the drag object should get to the edge of the viewport before scrolling starts.Default value is 20
scrollSpeed to set the speed of the viewport scroll. Default value is 20
snap To make the drag object nap to the edges of the specifed element. Default value is false
snapMode To define the edges of the element the drag object will snap to. Possible Value are either inside, outside or both. Default Value is both
snapTolerance To set the distance from snapping Element that drag objects should reach, before snapping takes place. Default value is 20
stack To make sure that the current drag object always stays on top of other drag object within the same group. It Accepts an object containing group and/or min properties.Default Value is false
zIndex To set the zIndex od the Helper Element.Default Value is False

jQuery UI Draggable : Setting the Drag Axis

The jQuery UI Draggable Widget can constrain the direction of drag by setting the axis , which enables you to contraint the Dragging Axis, to either the x-axis or the y-axis.

In the demo below, we have two div Elements upon which the method draggable() is called, initially both are set to axis x, and using the filter method set the value of second element to y axis.

Example: jQuery UI Draggable - Setting the Drag Axis

Give it a TRY! » Note: The First Element can be dragged only along Y axis, while the second can be dragged along the X-axis only.


jQuery UI Draggable : Limiting the Drag Region

The jQuery UI Draggable Widget also allows you to limit the region of the screen within which the element can be dragged.

This is done using the setting of containment.The set of values that the setting can be assigned are in the table below.

Table : jQuery UI Draggable Widget : Containment Setting Values

Value Description
Selector To Specify a Selector String, it limits the draggable Element to the area occupied by the first matching Element.
HTMLElement To Constraint the Draggable Element to the Area Occupied by the Specified Element.
string To use a string to specify the values of parent, document and window to restrict the dragging.
Number Array To set the value usign a number array in the format of [x1, y1, x2, y2] , to restrict the dragging Region.

In the Demo below, both the draggable Elements are constrained, such that they can be dragged only within their parent element, i.e a div Element of fixed size.

Example: jQuery UI Draggable Interaction - Limiting the Drag Region

Give it a TRY! » Note:The Setting axis of one of the element is set to x, thus restricting it to only X axis.


jQuery UI Draggable: To Limit the Dragging to a Grid

jQuery UI Draggable Widget can be specified a grid to make the draggable Element snap to a grid as it gets dragged.The value is two-element array defining the both the width and height of the grid in terms of pixels

In the demo, a grid is set in which the cells are 150px wide and 75px high, as the draggable is dragged , it snaps from one(invisible) cell to another.

Example: jQuery UI Draggable To Limit the Dragging to a Grid

Give it a TRY! » Note: The grid is defined in which the cells are 150px wide and 70px high.


jQuery UI Draggable : To Insert a Delay in Dragging

jQuery UI Draggable Interaction has two setting options which can be used to delay the dragging action, the settings are delay and distance

The value for setting delay is time in milliseconds before the element begins to move, the value for setting distance is distance the user must drag the element (in pixels) before the element begins to follow the mouse.

Example: jQuery UI Draggable : To Insert a Delay in Dragging

Give it a TRY! » Note: The user has to continue to drag first the element for 500 ms before the element begins to move, and for distance of 50px for the second.


jQuery UI Draggable: Setting the Cursor Option

jQuery UI Draggable Interactions Cursor configurations includes setting of cursor and cursorAt.

The value move for the cursor is not applied until the object is dragged, the option cursorAt accepts an object literal, whose properties can be top, right , bottom or left

Example: jQuery UI Menu Enhancing a Select Menu

Give it a TRY! » Note:The value for x option is ignored since we have set the value of axis as x


jQuery UI Draggable Interaction: Adding Drag Handle Support

The jQuery UI Draggable Interaction option of handle is used to specify a region of the Drag Object that can be used to drag the Object, and not any other area.Just like the dialog widget which can be dragged by clicking and holding the title bar.

In the demo below, we have created a div element with an id attribute, and used the id as a value for the option handle

Example: jQuery UI Draggable Interactions Adding Drag Handle Support

Give it a TRY! » Note: The drag object is still draggable, but only when the handle is dragged using a pointer.


jQuery UI Draggable Interaction: Adding the Helper Element

The jQuery UI Draggable Interaction can use a helper to subsitute element that is used to display the element when drag is in progress, instead of moving the actual drag.

In the demo below, CSS rules are used to Change the Cursor to denote that the image is beign moved.The value of the option clone and helper makes the exact copy of the original drag object to be used a draggable.

Example: jQuery UI Draggable Interactions Adding the Handle Element

Give it a TRY! » Note: The drag object is still draggable, but only when the handle is dragged using a pointer.


jQuery UI Draggable Interaction: Custom Helper Element

The jQuery UI Draggable Interaction's can be used to assign a custom helper to the draggable instead of its clone while the dragging is in progress

In the demo , the function call createHelper is used create an new div element and then sets visual appearances using CSS properties.Now when the draggable is dragged instead of a clone as it helper this custom helper is shown.

Example: jQuery UI Draggable Interactions Custom Helper Element

Give it a TRY! » Note: While the dragging is in progress the custom helper is shown and not the clone of the element.


jQuery UI Draggable Interaction: Snapping Setting

The jQuery UI Draggable Interaction can be used to assign a snapping feature(like a magnetic field) by using the snapping settings.This feature makes the dragged element to align itself to the specified elements.

The options snap is assigned the value of selector #snapIt, making the dragged object to snap to this element while the object is being dragged.

The option snapMode is assigned the value of inner to make the snapping occur on the inner edges of the snapper element.

Similarly, the option snapTolerance is set to 100 , which is the maximum distance in pixel units that the object needs to be dragged to get to the #snapBoundry element.

Example: jQuery UI Draggable Interactions Adding Drag Handle Support

Give it a TRY! » Note: When the object is dragged by 100 pixels from the edge of #snapBoundry element, the drag object automatically aligns itself to that edge.


jQuery UI Draggable Interaction: Resetting the Dragged Elements

The jQuery UI Draggable Interaction provides options to configure the drag objects to return to its original position at the start once they are dropped, the options for these purposes are revert and revertDuration

A value of true for the option revert causes the dragged object to return to its starting position at the end of drag process. The option revertDuration is used to control the speed of revert Duration in milliseconds.

Example: jQuery UI Draggable Interactions Resetting the Dragged Element

Give it a TRY! » Note:The actual speed of animation is based on the distance between the drag and drop points.