jQuery UI Draggable

jQuery UI draggable() method is used to make any DOM element draggable. Once the element is made draggable, you can move it by clicking on it with the mouse and drag it anywhere within the viewport.

Syntax:

You can use the draggable () method in two forms:

First Method

The draggable (option) method specifies that an HTML element can be moved in the HTML page. Here, the option parameter specifies the behavior of the elements involved.

Syntax:

You can use one or more options at a time using JavaScript object. In the case of multiple options, you should use commas to separate them. For example:

Following is a list of different options that can be used with this method:

Option	Description
addclasses	If this option is set to false, it will prevent the UI-draggable class from being added in the list of selected DOM elements. By default its value is true.
appendto	It specifies the element in which the draggable helper should be appended to while dragging. By default its value is "parent".
axis	This option constrains dragging to either the horizontal (x) or vertical (y) axis. Its possible values are:"x", "y".
cancel	This option is used to prevent dragging from starting on specified elements. By default its value is "input,textarea, button,select,option".
connecttosortable	This option is used to specify a list whose elements are interchangeable. At the end of placement, the element is part of the list. By default its value is "false".
containment	Constrains dragging to within the bounds of the specified element or region. By default its value is "false".
cursor	It is used to specify the CSS property of the cursor when the element moves. It represents the shape of the mouse pointer. By default its value is "auto".
cursorat	It sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. By default its value is "false".
delay	It specifies the delay in milliseconds, after which the first movement of the mouse is taken into account. The displacement may begin after that time. By default its value is "0".
disabled	It disables the ability to move items when set to true. Items cannot be moved until this function is enabled (using the draggable ("enable") instruction). By default its value is "false".
distance	The number of pixels that the mouse must be moved before the displacement is taken into account. By default its value is "1".
grid	It snaps the dragging helper to a grid, every x and y pixels. The array must be of the form [ x, y ]. By default its value is "false".
handle	If specified, restricts dragging from starting unless the mousedown occurs on the specified element(s). By default its value is "false".
helper	It allows for a helper element to be used for dragging display. By default its value is "original".
iframefix	It prevents iframes from capturing the mousemove events during a drag. By default its value is "false".
opacity	Opacity of the element moved when moving. By default its value is "false".
refreshpositions	If set to true, all droppable positions are calculated on every mousemove. By default its value is "false".
revert	It indicates whether the element is moved back to its original position at the end of the move. By default its value is "false".
revertduration	It indicates the duration of displacement (in milliseconds) after which the element returns to its original position (see options.revert). By default its value is "500".
scope	It is used to group sets of draggable and droppable items, in addition to droppable's accept option. By default its value is "default".
scroll	when set to true (the default), the display will scroll if the item is moved outside the viewable area of the window. by default its value is "true".
scrollsenstivity	It indicates how many pixels the mouse must exit the window to cause scrolling of the display. By default its value is "20".
scrollspeed	It indicates the scrolling speed of the display once scrolling begins. By default its value is "20".
snap	It adjusts the display of the item being moved on other elements (which are flown). By default its value is "false".
snapmode	It specifies how the adjustment should be made between the moved element and those indicated in options.snap. By default its value is "both".
snaptolerance	It specifies the maximum number of pixels in the difference in position necessary to establish the adjustment. By default its value is "20".
stack	It controls the z-index of the set of elements that match the selector, always brings the currently dragged item to the front. It is very useful in things like window managers. By default its value is "false".
zindex	z-index for the helper while being dragged. By default its value is "false".

jQuery UI Draggable() method example 1

Let's take an example to demonstrate draggable functionality passing no parameters to the draggable() method.

<!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>
  #draggable { width: 100px; height: 100px; padding: 0.5em; background:#7fffd4;}
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
  });
  </script>
</head>
<body>
     <div id="draggable" class="ui-widget-content">
	  <p>I am draggable!</p>
     </div>
</body>
</html>

Test it Now

jQuery UI Draggable() method example 2

How to use disable, distance and delay:

Let's take an example to demonstrate the usage of three important options disabled, delay and distance in the drag function of jQuery UI.

<!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="div1" style="border:solid 1px;background-color:pink;">
         <span>I am not movable.</span><br /><br />
      </div>
      <div id="div2" style="border:solid 1px;background-color:lightgreen;">
         <span>
            Dragging will start only after you drag me for 50px
         </span>
         <br /><br />
      </div>
      <div id="div3" style="border:solid 1px;background-color:lightyellow;">
         <span>
            Wait for 200ms before starting to drag. 
         </span>
         <br /><br />
      </div>
 <script>
         $("#div1 span").draggable (
            { disabled: true }
         );
         $("#div2 span").draggable (
            { distance: 50 }
         );
         $("#div3 span").draggable (
            { delay: 200 }
         );
 </script>
   </body>
</html>

Test it Now

jQuery UI Draggable() method example 3

Move content by duplicating:

Let's take an example to demonstrate how to move an element that is clone of the selected element. This is done by using option helper with value clone.

 <!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="div6" style="border:solid 1px;background:lightyellow; height:30px;">
      <span>You can duplicate me....</span>
   </div>
   <script>
      $("#div6 span").draggable ({
         helper : "clone"
      });
   </script>
</body>
</html>

Test it Now

jQuery UI Draggable() method example 4

Get current option value:

Let's take an example to show how you can get a value of any option at any time during your script execution. The value of cursor and cursorAt option is set at the time of execution.

<!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="divX" style="border:solid 1px;background:lightpink; height:30px;">
      <span>Click on me to see cursor type.</span>
   </div>
   <script>
      /* First make the item draggable */
      $("#divX span").draggable();
      
      $("#divX span").bind('click', function( event ){
          var cursor = $( "#divX span" ).draggable( "option", "cursor" );
          var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
          alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
     });
   </script>
</body>
</html>

Test it Now

Second Method

The draggable (action, params) method is used to perform an action like prevent displacement. Here action is specified as a string and one or more params can be provided based on the given action.

Syntax:

Following is a list of actions used with this method:

Action	Description
destroy()	It is used to remove drag functionality completely. The elements are no longer movable. This will return the element back to its pre-init state.
disable()	It is used to disable drag functionality. Elements cannot be moved until the next call to the draggable("enable") method.
enable()	It is used to reactivates drag management. The elements can be moved again.
option(optionname)	It gets the value currently associated with the specified optionname. Here optionname is name of the option to get and is of type string.
option()	It gets an object containing key/value pairs representing the current draggable options hash.
option(optionname, value)	It sets the value of the draggable option associated with the specified optionname. Here optionname is the name of the option to set and value is the value to set for the option.
option(options)	It sets one or more options for the draggable. Here options is a map of option-value pairs to set.
widget()	It returns a jQuery object containing the draggable element.

jQuery UI Draggable() method example 5

Let's take an example to see the use of actions from the above table. The following example demonstrates the use of "disable" and "enable" action.

<!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="div7" style="border:solid 1px;background-color:pink;">
         <span>Dragging is disabled. You can't move me!</span><br><br>
      </div>
      <div id="div8" style="border:solid 1px;background-color:yellow;">
         <span>Dragging is enabled. Move Me!</span><br><br>
      </div>
      <script>
         $("#div7 span").draggable ();
         $("#div7 span").draggable ('disable');
         $("#div8 span").draggable ();
         $("#div8 span").draggable ('enable');
      </script>
   </body>
</html>

Test it Now

Next TopicjQuery UI Droppable

← prev next →

jQuery

jQuery UI Tutorial

jQuery Interactions

jQuery Widgets

jQuery Effects

Interview Questions

jQuery UI Draggable

First Method

jQuery UI Draggable() method example 1

jQuery UI Draggable() method example 2

jQuery UI Draggable() method example 3

jQuery UI Draggable() method example 4

Second Method

jQuery UI Draggable() method example 5