天天看點

javascript 中ondragstart ondrag實作拖動界面元素效果 .

<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> 

繼續閱讀