jQuery UI draggable - Drag elements

To create easily a drag effect with jQuery, you need to use jQuery UI, which is a library of additional functions to the main jQuery library.
The jQuery UI is like a plugin that contains lots of functions to create special effects with jQuery. So, you need to include in your web page both jQuery library and jQuery UI.
- You can download jQuery UI from this page: Download jQuery UI

The draggable() method

To create the possibility of dragging elements with the mouse, you can use the draggable() function.
The draggable() method enables draggable functionality on any DOM element, so you can move it with your mouse. This method has the following sintax:

$('selector').draggable({ option: value });

- option: value - represents one ore more option/value pairs that configure the draggable() function. There are lots of options for this function, here's some of them:

axis - Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.
containment - Constrains dragging to within the bounds of the specified element or region. Values: 'parent', '#id_element', 'window', [x1, y1, x2, y2].
cursor - The css cursor during the drag operation (pointer, move, crosshair, help, etc.).
cursorAt - sets the position of the mouse cursor relative to the element while it's dragging. Coordinates can be a combination of one or two keys: { top:value, left:value, right:value, bottom:value } ; "value" is a numeric value.
handle - specifies an element (selector) inside the draggable item, that can be clicked to drag the object.
opacity - Opacity of the element while it's dragged.
revert - If set to true, the element will return to its start position when dragging stops. Possible values: 'valid', 'invalid', 'true', 'false'.
If set to "invalid", revert will only occur if the draggable has not been dropped on a droppable.
revertDuration - The duration of the revert animation, in milliseconds (default: 500). Ignored if revert is false.
stack - The value of this option must be a selector. It brings to front the dragged item that match the selector.
zIndex - sets the z-index for the element while it's dragged.
drag: function(event, ui) {...} - a function that is executed when the mouse is moved during the dragging.
The parameters "event" and "ui" are optional; "event" represents the event which is triggered, "ui" represents the UI object:
ui.helper - current draggable helper, a jQuery object.
ui.position - position of the helper as { top, left } object, relative to the offset element.
ui.offset - absolute position of the helper as { top, left } object, relative to page
start: function(event, ui) {...} - a function that is executed when dragging starts. The parameters "event" and "ui" are optional.
stop: function(event, ui) {...} - a function that is executed when dragging stops. The parameters "event" and "ui" are optional.

- A complete list with the options for draggable() method can be found at Draggable.

Example 1:
Dragging a image and a DIV element. The image can be dragged and dropped anywhere on the page, the DIV and its content can be dragged on the horizontal (x) axis only. They are bring to front after the dragging action.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging</title>
<style type="text/css"><!--
#dg2 {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the '#dg1' element as draggable and define some options
  $('#dg1').draggable({
    cursor: 'move',        // sets the cursor apperance
    opacity: 0.35,         // opacity fo the element while it's dragged
    stack: $('#dg1')       // brings the '#dg1' item to front
  });

  // sets the '#dg2' element as draggable
  $('#dg2').draggable({
    cursor: 'pointer',      // sets the cursor apperance
    opacity: 0.35,          // opacity fo the element while it's dragged
    stack: $('#dg2'),       // brings the '#dg2' item to front
    axis: 'x'               // allow dragging only on the horizontal axis
  });
});
--></script>
</head>
<body>
<h4>Click and drag:</h4>
<img src="rhomb.gif" alt="Rhomb" width="80" height="70" id="dg1" />
<div id="dg2">Draggable only on horizontal axis,<br />
Cursor sets to pointer.</div>
</body>
</html>

Demo:

Click and drag:

Draggable only on horizontal axis,
Cursor sets to pointer.

Example 2:
Dragging with revert and a duration of 900 milliseconds. When the DIV is dragged, the cursor is bringed to the left side (due to cursorAt: {left: 8}).

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging with revert</title>
<style type="text/css"><!--
div.dg {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets the elements with class="dg" as draggable and define some options
  $('.dg').draggable({
    cursor: 'move',        // sets the cursor apperance
    opacity: 0.35,         // opacity fo the element while it's dragged
    revert: true,          // sets the element to return to its start location
    revertDuration: 900
  });

  // sets another option (cursorAt), but only for DIV with class="dg"
  $('div.dg').draggable({ cursorAt: {left: 8} });
});
--></script>
</head>
<body>
<h4>Click and drag:</h4>
<img src="rhomb.gif" alt="Rhomb" width="80" height="70" class="dg" />
<div class="dg">DIV draggable with revert.<br />
Cursor bringed to left side.</div>
</body>
</html>

Demo:

Click and drag:

DIV draggable with revert.
Cursor bringed to left side.

Example 3:
Using handle option to drag an element only when the cursor is over a sfecific part inside the draggable. A DIV which contains a <h5> tag and a paragraph, it can be dragged only when the mouse is over the area of the H5 element.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging with handle</title>
<style type="text/css"><!--
#dg { width:225px; border:1px solid blue; }
#dg h5 { margin:1px; background:#07da08; cursor:pointer; text-decoration:underline; text-align:center; }
#dg p { margin:10px 3px 0px 3px; background:#d7d8fe; }
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets draggable the elements with id="dg"
  $('#dg').draggable({
    // sets to can be dragged only when the cursor is over the H5 part
    handle: 'h5'
  });
});
--></script>
</head>
<body>
<div id="dg">
 <h5>Click and Drag</h5>
 <p>jQuery Course:<br />
 <i>https://coursesweb.net/javascript/</i></p>
</div>
</body>
</html>

Demo:

Click and Drag

jQuery Course:
https://coursesweb.net/javascript/

Example 4:
Constrain dragging a rhomb image to within a DIV with id="drg". Constrain dragging a paragraph to within the bounds of its parent.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging with containment</title>
<style type="text/css"><!--
#drg {
 width:380px;
 height:210px;
 border:2px solid blue;
}
#prt {
 width:305px;
 height:100px;
 margin:8px;
 background:#efefef;
}
#prt p { width:185px; margin:1px; background:#a7daa8; }
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // sets draggable the elements with id="im"
  $('#im').draggable({
    cursor: 'move',        // sets the cursor apperance
    containment: '#drg'    // sets to can be dragged only within "#drg" element
  });

  // sets draggable the paragraph inside #prt
  $('#prt p').draggable({
    cursor: 'move',
    containment: 'parent'      // sets to can be dragged only within its parent
  });
});
--></script>
</head>
<body>
<h4>Click and drag:</h4>
<div id="drg">
 #drg box<br />
 <img src="rhomb.gif" alt="Rhomb" width="80" height="70" id="im" />
 <div id="prt">
  <p>This paragraph can be dragged only inside its parent</p>
 </div>
</div>
</body>
</html>

Demo:

Click and drag:

#drg box

This paragraph can be dragged only inside its parent

Example 5:
Use the "start" and "stop" events to get the direction and distance of dragging, then display them into an Alert window.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Dragging - get direction and distance</title>
<style type="text/css"><!--
#dg {
 width:180px;
 height:100px;
 margin:8px;
 background:#a7daa8;
 cursor:pointer;
}
--></style>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.14.js"></script>
<script type="text/javascript"><!--
// sets two variables to store the X and Y position
var xpos; var ypos;

$(document).ready(function() {
  // sets draggable the element with id="dg"
  $('#dg').draggable({
    // get the initial X and Y position when dragging starts
    start: function(event, ui) {
      xpos = ui.position.left;
      ypos = ui.position.top;
    },
    // when dragging stops
    stop: function(event, ui) {
      // calculate the dragged distance, with the current X and Y position and the "xpos" and "ypos"
      var xmove = ui.position.left - xpos;
      var ymove = ui.position.top - ypos;

      // define the moved direction: right, bottom (when positive), left, up (when negative)
      var xd = xmove >= 0 ? ' To right: ' : ' To left: ';
      var yd = ymove >= 0 ? ' Bottom: ' : ' Up: ';

      alert('The DIV was moved,\n\n'+ xd+ xmove+ ' pixels \n'+ yd+ ymove+ ' pixels');
    }
  });
});
--></script>
</head>
<body>
<div id="dg">Click and Drag<br />
Will alert the X and Y moved direction and distance.</div>
</body>
</html>

Demo:

Click and Drag
Will alert the X and Y moved direction and distance.

<<-Validate and Submit Form -- Drag and Drop with ..->>

jQuery UI draggable - Drag elements

Jquery Course

The draggable() method

Click and drag:

Click and drag:

Click and Drag

Click and drag:

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month