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: - 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:

Rhomb
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:

Rhomb
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>http://coursesweb.net/javascript/</i></p>
</div>
</body>
</html>
Demo:
Click and Drag

jQuery Course:
http://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
Rhomb

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.