jquery draggable, droppable and resizable

Jquery is a fast and light weight java script library. It provides API to do easy UI changes, animation, ajax calls and etc. Also it provide support to most of the web browsers.
In this post, I will explain the most interesting functionalists of jquery called draggable, droppable and resizable.  As an interesting example I am creating an image hotspot and capturing it's co-ordinates using these technologies.

Prerequisites:
Download the following.

 http://code.jquery.com/jquery-1.10.2.min.js
 http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js
 http://technicalminds.in/wp-content/uploads/2014/02/monkey-150x150.jpg

Steps:

• Create a folder named "jquery examples".


• Copy the above downloaded files inside that.


• Create a file named jquerydraganddrop.html and copy the belowcode.

<doctype>
<meta charset="utf-8" />
jQuery UI Draggable - Default functionality<style><!--
#minblock { width: 1000px; height: 500px; }
#draggablecorrect { width: 50px; height: 50px;  float: right; margin: 0 600px 0 0; }
#draggablewrong { width: 50px; height: 50px;  float: right; margin: 0 600px 0 0; }
#droppable { width: 350px; height: 350px;  }
--></style>    <link href="jquery-ui.css" rel="stylesheet" /><script type="text/javascript" src="jquery-1.10.2.min.js"></script><script type="text/javascript" src="jquery-ui.min-1.10.2.js"></script>
<div></div>
<div id="minblock" style="border: 1px solid #000;">
<div id="droppable" style="border: 1px solid #000; width: 350px; height: 350px; padding: 0.5em; float: left; margin: 10px;"><img id="hotspotimage" alt="" src="monkey-150x150.jpg" width="350" height="350" /></div>
<div id="hotspot">
<div id="draggablecorrect" style="border: 1px solid #000;">Correct<img id="correctspot" alt="" src="sign_correct.gif" /></div>
</div>
<script type="text/javascript">// <![CDATA[
$(function() {
$( "#draggablecorrect" ).resizable();
$( "#draggablecorrect" ).draggable({ revert: "invalid" });$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this ).addClass( "ui-state-highlight" );
var pos = ui.draggable.offset(), dPos = $(this).offset();
alert("Top: " + (pos.top - dPos.top) +
", Left: " + (pos.left - dPos.left));}
});$('#hotspotimage').click(function(e) {
var posX = $(this).offset().left, posY = $(this).offset().top;
alert((e.pageX - posX)+ ' , ' + (e.pageY - posY));
});});
// ]]></script></pre>