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 EventsGive 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
|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 AxisGive 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
|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 RegionGive 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 GridGive 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 DraggingGive 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 MenuGive 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 SupportGive 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 ElementGive 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 ElementGive 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 SupportGive 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.