<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function showpos()
{
document.all.x.value = event.clientX;
document.all.y.value = event.clientY;
}
function Point()
{
this.x, this.y;
this.eventpos = function()
{
this.x = event.clientX;
this.y = event.clientY;
}
this.setpos = function(pt)
{
this.x = pt.x;
this.y = pt.y;
}
}
var ptPre = new Point();
var ptCur = new Point();
function move(ptTo, ptFrom)
{
ox = ptTo.x - ptFrom.x;
oy = ptTo.y - ptFrom.y;
event.srcElement.style.posLeft += ox;
event.srcElement.style.posTop += oy;
}
</script>
<style type="text/css">
.dr
{
position : relative ;
cursor : hand ;
event:expression(
ondragstart=function()
{
ptCur.eventpos();
ptPre.eventpos();
},
ondrag=function(){
ptCur.eventpos();
move(ptCur,ptPre);
ptPre.setpos(ptCur);
}
)
}
</style>
</head>
<body onmousemove="showpos()" >
<form>
<div class="dr">X:<input name="x" id="x" type="text"></input></div>
<div class="dr">Y:<input name="y" id="y" type="text"></input></div>
</form>
<img class="dr" src="free_register.gif" mce_src="free_register.gif" />
<br/>
<div class="dr">Select me,and drag</div>
</body>
</html>