Jquery Course

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

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
jQuery UI draggable - Drag elements

Last accessed pages

  1. PuzzleImg - Script to Create Image Puzzle Game (9371)
  2. SHA512 Encrypt hash in JavaScript (24681)
  3. JavaScript strip_tags and stripslashes (8628)
  4. SHA1 Encrypt data in JavaScript (35219)
  5. Keep data in form fields after submitting the form (12326)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (322)
  2. PHP Unzipper - Extract Zip, Rar Archives (112)
  3. Read Excel file data in PHP - PhpExcelReader (103)
  4. SHA1 Encrypt data in JavaScript (82)
  5. Get and Modify content of an Iframe (75)