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

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

WBOY
发布: 2016-05-16 18:35:00
原创
1030 人浏览过

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

复制代码 代码如下:



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

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板