首頁  >  文章  >  web前端  >  javascript 鼠标拖动图标技术_javascript技巧

javascript 鼠标拖动图标技术_javascript技巧

WBOY
WBOY原創
2016-05-16 18:35:001021瀏覽

这个例子简单讲就是鼠标拖动图标到它任意想去的地方
代码

复制代码 代码如下:



<script> <BR>var bb = document.getElementById("block"); <BR>bb.onmousedown = function(){ <BR>//获取鼠标当前坐标 <BR>var pageX = event.clientX; <BR>var pageY = event.clientY; <BR>//获取block的坐标,左边界和上边界 <BR>var offX = parseInt(this.style.left)||0; <BR>var offY = parseInt(this.style.top)||0; <BR>//计算出鼠标坐标相对于block坐标的间距 <BR>var offLX = pageX-offX; <BR>var offLY = pageY-offY; <BR>if(!document.onmousemove){ <BR>document.onmousemove = function(){ <BR>bb.style.left=event.clientX-offLX; //设置block的X坐标 <BR>bb.style.top=event.clientY-offLY; //设置block的Y坐标 <BR>} <BR>} <BR>} <BR>document.onmouseup = function(){document.onmousemove = null;} //鼠标弹起 <BR></script>

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn