<html>
<head>
<script type='text/javascript' src='js/jquery-1.5.1.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
var mouseX=0,mouseY=0;
var divLeft,divTop;
$('.dragMe').mousedown(function(e){
mouseX=e.pageX;
mouseY=e.pageY;
var offset=$(this).offset();
divLeft=parseInt(offset.left,10);
divTop=parseInt(offset.top,10);
$(this).bind('mousemove',dragElement);
});
function dragElement(event){
var left=divLeft+(event.pageX-mouseX);
var top=divTop+(event.pageY-mouseY);
$(this).css({
'top': top+'px',
'left': left+'px',
'position':'absolute',
'background-color':'blue'
});
}
$(document).mouseup(function(){
$('.dragMe').unbind('mousemove').css('background-color','#ccc');
});
});
</script>
<style type='text/css'>
div{
background-color:#ccc;
height:200px;
width:300px;
font-color:green;
margin:10px;
float:left;
text-align:center;
}
</style>
</head>
<body>
<div class='dragMe'>Drag ME</div>
<div class="dragMe">Drag Me</div>
</body>
</html>