The drag is a common feature which is an event, enables dragging by allowing DOM elements to be moved using the mouse. It is something like, when we grab an object and drag it to a different location. It is an intuitive way for user to interact with website or application. Once the element is draggable, we can drag the element anywhere within the viewport by clicking the mouse. A drag operation could be performed using mouse events and the drop operation could be triggered by the mouse being released. This drop event occurs, when the dragged data is dropped to a different location in the viewport.
The drag operation could be used to perform some tasks such as moving email messages or any contents to the folders, rearranging list of items etc. The draggable method can be used in following forms:
- $(selector, context).draggable(options)
- $(selector, context).draggable(“actions”, [params])
The following is a simple example of draggable widget:
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style type="text/css"> #DragMe { width: 150px; height:150px; padding:0.5em; background:orange; text-align:center; } </style> <script type="text/javascript"> $(function () { $('#DragMe').draggable(); }); </script> </head> <body> <div id="DragMe"> <p>Drag me</p> </div> </body> </html>
The above script uses draggable() method which moves elements to a different location in the viewport. We are using the id selector “DragMe” within the div element and providing different CSS styles using this selector for displaying result as specified values.
JQueryUI-Draggable-SimpleExample-Demo
Draggable Widget Options
The draggable method contains following options:
Option | Description | Default Value |
---|---|---|
addClasses | It possible to prevent ui-draggable class from being added, set this option with false in the list of DOM elements. | true |
appendTo | It appends the specified element while dragging. | parent |
cursor | It specifies the mouse pointer when an element moves. | auto |
containment | It drags the element within bounds of the region. | false |
axis | It defines the axis which the dragged elements moves on the values such as horizontal or vertical axis. | null |
cancel | It is used to cancel the dragging operation on the specified element. | input, textarea, button, select, option |
cursorAt | It specifies the offset to the mouse pointer | false |
delay | It specifies the delay time in milliseconds when the movement of mouse is taken into account . | 0 |
disabled | It disables the movement of elements when it is set to true i.e. it stops draggable. | 1 |
distance | It determines the displacement before moving the cursor in the form of pixels. | 1 |
grid | It drags the elements to grid system with x and y pixels in the form of [x,y]. | false |
handle | The handle that start the draggable. | false |
helper | It provides helper element for dragging display. | original |
opacity | It provides opacity of the element when moving. | false |
revert | It reverts the element back to its original position after completion of move. | false |
revertDuration | It determines the duration in milliseconds when element revert back to its original position. | 500 |
scope | It defines sets of draggable and droppable of items. | default |
scroll | It scrolls the element when it is moved outside the viewport of window. | true |
scrollSpeed | It displays the scrolling speed. | 20 |
snap | It display the elements which are being moved on the other elements. | false |
snapMode | It determines adjustment between the moved element and options.snap . | both |
snapTolerance | It specifies maximum number of pixels to establish the adjustment. | 20 |
stack | It brings the matched element from the set of elements to the fron. | false |
zIndex | It initialize the Z-index for the helper while being dragged. | false |
Example using Options
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style type="text/css"> #DragMe { width: 200px; height: 200px; background:orange;} #DragHelper { width: 200px; height: 200px; background: red; } </style> <script type="text/javascript"> $( init ); function init() { $('#DragMe').draggable( { cursor: 'move', containment: 'document', helper: myHelper } ); } function myHelper( event ) { return '<div id="DragHelper">Please drag me!!!</div>'; } </script> </head> <body> <div id="mydemo"> <div id="DragMe">Drag to see helper element</div> </div> </body> </html>
JQueryUI-Draggable-Options-Demo
Draggable Widget Methods
The following table shows some of the methods which are used with draggable widget:
Method | Description |
---|---|
destroy() | It removes the draggable functionality. |
disable() | This method disables the drag action. |
enable() | This method enables the drag action. |
instance() | It creates the draggable instance object. |
options() | It returns the options property. It sets draggable option with specified option name. |
widget() | It defines draggable element object. |
Example using Methods
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #mydiv1 { width:60%; height:40px; background:orange; } #mydiv2 { width:60%; height:40px; background:pink; } </style> </head> <body> <div id="mydiv1" style="border:1px solid red;"> <p>This is disabled element.</p> </div> <div id="mydiv2" style="border:1px solid green;"> <p>This is enabled element.</p> </div> <script> $("#mydiv1 p").draggable (); $("#mydiv1 p").draggable ('disable'); $("#mydiv2 p").draggable (); $("#mydiv2 p").draggable ('enable'); </script> </body> </html>
JQueryUI-Draggable-Methods-Demo
Draggable Widget Events
The following table shows events which are used with draggable widget:
Event | Description |
---|---|
create | It fires when draggable element is created. |
start | It calls when starts dragging element. |
drag | It is called when mouse is moved during the dragging. |
stop | It fires when a drag is ended. |
Example using Events
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> </head> <body> <div id="mydiv1" style="border:1px solid red;"> <p>Welcome to JQuery UI!!!</p> </div> <script type="text/javascript"> $('#mydiv1 p').draggable( { cursor: 'move', stop:function(event, ui){ alert("Drag is Ended!!!"); } }); </script> </body> </html>