<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$.fn.iDraggable=function(){
var bool = false;
var disX = 0;
var disY = 0;
var dragObj=$(this);
dragObj.mousedown(function(event) {
bool = true;
disX=event.clientX- dragObj.offset().left;
disY=event.clientY- dragObj.offset().top;
dragObj.css("position","absolute");
dragObj.css("cursor","move");
dragObj.mouseup(function() {
bool = false;
});
$(document).mousemove(function(event) {
if (!bool) {
return;
}
else {
var x=event.clientX-dragObj.parent().offset().left-disX;
var y=event.clientY-dragObj.parent().offset().top-disY;
dragObj.css("left", x+"px");
dragObj.css("top", y+"px");
}
});
});
};
})(jQuery);
$(document).ready(function(){
$("#draggable").iDraggable();
});
</script>
</head>
<body>
<div id="draggable" style="width:100px;height:100px;background:red;">
</div>
</body>
</html>