javascript 中ondragstart ondrag实现拖动界面元素效果 .-CSDN博客

<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(
οndragstart=function()
{
ptCur.eventpos();
ptPre.eventpos();
},
οndrag=function(){
    ptCur.eventpos();
     move(ptCur,ptPre);
    ptPre.setpos(ptCur);
}
)
}
</style>
</head>
<body οnmοusemοve="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>