企业为何要做小程序_JavaScript鼠标拖拽工作详解

JavaScript鼠标拖拽事件详解       这篇文章主要为大家详细介绍了JavaScript鼠标拖拽事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js鼠标拖拽事件的详细实现代码,供大家参考,具体内容如下

图片如下:

css代码

 style 
 margin:0;
 padding:0;
 #box{
 width: 200px;
 height: 200px;
 background: url("./img/aio.png") no-repeat;
 background-size: cover;
 position: absolute;/*定位元素 父级元素window就是初始包含块*/
 top:0;
 left:0;
 /style 

html代码

 div id="box" /div 

js代码

 script 
 //获取标签
 var box=document.getElementById("box");
 var body=document.body;
 var x,y;//全局作用域
 //鼠标按下事件 0级
 box.onmousedown=function(e) {//传入形参e
 var mx=e.clientX;//鼠标距离浏览器左
 var my=e.clientY;//鼠标距离浏览器上
 var bx=box.offsetLeft;//盒子距离浏览器左
 var by=box.offsetTop;//盒子距离浏览器上
 x=mx-bx;//实际盒子距离的浏览器左
 y=my-by;//实际盒子距离的浏览器上
 //鼠标移动事件 0级
 body.onmousemove=function(e) {//拿到全局x、y、
 //获取当前鼠标移动到的坐标点
 var mx=e.clientX;
 var my=e.clientY;
 //盒子距离浏览器
 box.style.left=mx-x +"px";
 box.style.top=my-y +"px";
 //鼠标弹起事件(松开)
 box.onmouseup=function(e) {
 body.onmousemove=null;//不做任何操作//dom0级事件解除事件绑定
 //获取当前鼠标移动到的坐标点
 var mx=e.clientX;
 var my=e.clientY;
 //盒子距离浏览器
 box.style.left=mx-x +"px";
 box.style.top=my-y +"px";
 /script 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信