Post
Ask Question

JQueryUI - Day 2 (Draggable)

Before reading this article, I highly recommend reading the following previous article:

jQuery draggable is a interaction type widget that allows elements to be moved using the mouse. Draggable supports a number of methods (destroy, disable, enable, option, widgets) and events (create, drag, start and stop).

Let us create a simple html page and create some draggable elements.

Firstly, create a div using the following html code.
  1. <divid="drag">  
  2.     <spanid="span1">Draggable Element</span>  
  3.         <br/>  
  4.     <spanid="span2">Drag Me</span>  
  5.  </div>  
Now we add some css property, so use the following css for elements.
  1. <style>  
  2.     #drag   
  3.     {  
  4.         background-color: coral;  
  5.         border-style: groove;  
  6.         border-color: chocolate;  
  7.         font-size: 20px;  
  8.         width: 230px;  
  9.         height: 100px;  
  10.         margin-left: 150px;  
  11.         margin-top: 200px;  
  12.         text-align: center;  
  13.     }  
  14.      
  15.     #span1  
  16.     {  
  17.         font-size: 26px;  
  18.         color: darkolivegreen;  
  19.     }  
  20. </style>  
At last we add the jQuery code to make draggable div element.
  1. <script>  
  2.     $(document).ready(function()  
  3.     {  
  4.         $("#drag").draggable();  
  5.   
  6.     })  
  7. </script>  
After adding all above code now a draggable div is ready and we can drag this div element any where in our web page.

Output:

output 

Options:

We can set various types of options for a draggable element to performance optimization. Let us consider some options .

addClasses Option:

If addClasses is set to false then it will prevent “ui-draggable” class to be added. This may be desired as a performance optimization when we call hundred of elements.

Example:
  1. //Initializer  
  2. $("#drag").draggable(  
  3.  {  
  4.     addClasses: false  
  5. });  
  6.   
  7.   
  8. //Setter  
  9. $("#drag").draggable("option", "addClasses", false);  
If we set the value of addClasses option equal to “false” then we can’t drag that element further.
 
After initialization we can get or set the option.

//Getter
var addClass_ = $("#drag ").draggable("option", "addClasses");

axis Option:

The axis option is used to define the axis around which element will drag either the horizontal (x) or vertical (y) axis by passing the value of axis.

Example:
  1. //Initializer  
  2. $("#drag").draggable(  
  3. {  
  4.     addClasses: false  
  5. });  
  6.   
  7. //Setter  
  8. $("#drag").draggable("option", "addClasses", false);  
  9. This code allow draggable element to move in x axis not in y axis.  
  10.     //Initializer  
  11. $("#drag").draggable(  
  12. {  
  13.     axis: "x"  
  14. });  
  15.   
  16. //Setter  
  17. $("#drag").draggable("option", "axis", "y");  
Now this code allow draggable element to move in y axis not in x axis.

cursor Option:

The cursor option is used to define the type of css cursor during dragging.

Example:
  1. //Initializer  
  2. $("#drap").draggable(  
  3. {  
  4.     cursor: "crosshair"  
  5. });  
Above code show a crosshair cursor when we drag the div.

delay Option:

The delay option define the time milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking an element.

Example:
  1. $("#drag").draggable(  
  2.   {  
  3.     delay: 500  
  4. });  
In above code we define delay of 5 seconds so dragging will start after 5 second of mousedown.

disabled Option:

The disabled option disables the draggable if set to true.

Example:
  1. //Initializer  
  2. $("#drag").draggable(  
  3.   {  
  4.     disabled: true  
  5. });  
distance Option:

The distance option define the distance in pixel after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.

Example:
  1. //Initializer  
  2. $("#drag").draggable(  
  3.   {  
  4.     distance: 20  
  5. });  
According to above code dragging will start after 20 pixel traveled by mouse.

grid Option:

The grid option snaps the dragging helper to a grid in every x and y pixels. The grid is defined in form of array[ x, y ].

Example:
  1. //Initializer  
  2. $("#drag").draggable(  
  3.   {  
  4.     grid: [100, 100]  
  5. });  
Suppose if current pixel position of draggable element is 500,700 and we drag the element in “x” direction then next position will be 600,700.

opacity Option:

The opacity option define the opacity of draggable element during the dragging.

Example:
  1. //Initializer  
  2. $("#drag").draggable(  
  3.   {  
  4.     opacity: 0.35  
  5. });  
According to above code, the opacity of draggable elemnt will be 0.35 at the time of dragging.

revert Option:

The revert option define that whether the element should revert to its start position when dragging stops. If set to true the element will always revert.

Example:
  1. //Initializer  
  2. $("#drag").draggable  
  3. ({  
  4.     revert: true  
  5. });  
revertDuration Option:

The revertDuration define duration of the revert animation, in milliseconds. The revertDuration option ignored if revert defined to false.

Example:
  1. //Initializer  
  2. $("#drag").draggable  
  3. {  
  4.     revert: true,  
  5.     revertDuration: 5000  
  6. });  
In above code we define the value of revertDuration equal to 5 sec, so draggable element will take 5 second in revert process.

scroll option:

If scroll option is set to true, container auto-scrolls while dragging. If set to false, container will not provide the scroll. Default value is “true”.

Example:
  1. //Initializer  
  2. $("#drag").draggable  
  3. ({  
  4.     scroll: false  
  5. });  
Above code doesn’t provide a auto scroll if element try to cross the screen.

Methods:

destroy Method:

The destroy method removes the draggable functionality completely. This will return the element back to its pre initialized state.

Example:

$("#drag").draggable("destroy");

Disable Method:

The disable method disable the draggable.

Example:

$("#drag").draggable("disable");

enable Method:

This method enable the draggable.

Example:

$("#drag").draggable("enable");

option Method:

The option is used to set or get the values of currently associated option.

Example 1:

Option method to set the options values.
  1. $(document).ready(function()  
  2.             {  
  3.             //Initializer  
  4.             $("#drag").draggable  
  5.             ({  
  6.                 axis: "x",  
  7.                 addClasses: true,  
  8.                 cursor: "crosshair",  
  9.                 delay: 200  
  10.             });  
  11.     
  12.             //Setter  
  13.             $("#drag").draggable("option", "axis", "y");  
  14.             $("#drag").draggable("option", "addClasses", false);  
  15.             $("#drag").draggable("option", "cursor", "crosshair");  
  16.             $("#drag").draggable("option", "delay", 150);  
In above code we use option method as setter to set the values of options.

Example 2:

Option method to get the value of options. Option method return key/value pairs representing the current draggable options hash.
  1. //Initializer  
  2. $("#drag").draggable  
  3. ({  
  4.     axis: "x",  
  5.     addClasses: true,  
  6.     cursor: "crosshair",  
  7.     delay: 200  
  8. });  
  9.   
  10.   
  11. //Getter  
  12. var Obj = $("#drag").draggable("option")  
  13. alert("Values of Axis is=" + Obj["axis"] + "\n" +  
  14. "Values of addClasses is=" + Obj["addClasses"] + "\n" +  
  15. "Values of cursor is=" + Obj["cursor"] + "\n" +  
  16. "Values of delay is=" + Obj["delay"] + "\n");  
  17.   
  18. })  
Output:

output

Events:

create(event ,ui):

The create event triggered when draggable is created. Where event is of type Event, and ui is of type Object.

Example:
  1. $("#drag").draggable  
  2. ({  
  3.     create: function(event, ui)  
  4.   {  
  5.         alert("drag has been created")  
  6.     }  
  7. });  
  8.   
  9. Bind an event listener to the dragcreate event:  
  10.   
  11.     $("#drag").on("dragcreate", function(event, ui) {});  
drag( event, ui ):

The drag event triggered while the mouse is moved during the dragging. It triggered immediately before the current move happens. Where event is of type Event, and ui is of type object like helper, position, offset.

Example:
  1. $("#drag").draggable  
  2. ({  
  3.     drag: function(event, ui)   
  4.   {  
  5.         alert("Left Position is=" + ui.position.left + "\n" +  
  6.             "top Position is=" + ui.position.top + "\n" +  
  7.             "Left offset is=" + ui.position.left + "\n" +  
  8.             "top offset is=" + ui.position.top + "\n")  
  9.     }  
  10. });  
Output:

output

start( event , ui ):

The start event triggered while the mouse is moved during the dragging where event is of type Event, and ui is of type Object like helper, position, offset.

Example:
  1. $("#drag").draggable  
  2. ({  
  3.     start: function(event, ui)   
  4.   {  
  5.         alert("Left Position is=" + ui.position.left + "\n" +  
  6.             "top Position is=" + ui.position.top + "\n" +  
  7.             "Left offset is=" + ui.position.left + "\n" +  
  8.             "top offset is=" + ui.position.top + "\n")  
  9.     }  
  10. });  
Output:

output

stop( event , ui ):

Stop event triggered when dragging stops where event is of type Event, and ui is of type Object like helper, position, offset.

Example:
  1. $("#drag").draggable  
  2. ({  
  3.       stop: function(event, ui)  
  4.   {  
  5.         alert("Left Position is=" + ui.position.left + "\n" +  
  6.             "top Position is=" + ui.position.top + "\n" +  
  7.             "Left offset is=" + ui.position.left + "\n" +  
  8.             "top offset is=" + ui.position.top + "\n")  
  9.     }  
  10. });  
Output:

output

Today we learned about the draggable element, in next article we will learn about droppable. Till then keep coding.

Thanks for reading the article.


Similar Articles