首页 >web前端 >js教程 >javascript 鼠标拖动图标技术_javascript技巧

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

WBOY
WBOY原创
2016-05-16 18:35:001024浏览

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

复制代码 代码如下:



<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