转：JavaScript鼠标拖拽事件详解
html代码：
1 <div id="box"></div>
css代码：
1 *{ 2 margin:0; 3 padding:0; 4 } 5 #box{ 6 width: 200px; 7 height: 200px; 8 background: url("./img/aio.png") no-repeat; 9 background-size: cover; 10 position: absolute;/*定位元素 父级元素window就是初始包含块*/ 11 top:0; 12 left:0; 13 }
js代码：
1 //获取标签 2 var box=document.getElementById("box"); 3 var body=document.body; 4 var x,y;//全局作用域 5 //鼠标按下事件 0级 6 box.onmousedown=function(e) {//传入形参e 7 var mx=e.clientX;//鼠标距离浏览器左 8 var my=e.clientY;//鼠标距离浏览器上 9 var bx=box.offsetLeft;//盒子距离浏览器左 10 var by=box.offsetTop;//盒子距离浏览器上 11 x=mx-bx;//实际盒子距离的浏览器左 12 y=my-by;//实际盒子距离的浏览器上 13 //鼠标移动事件 0级 14 body.onmousemove=function(e) {//拿到全局x、y、 15 //获取当前鼠标移动到的坐标点 16 var mx=e.clientX; 17 var my=e.clientY; 18 //盒子距离浏览器 19 box.style.left=mx-x +"px"; 20 box.style.top=my-y +"px"; 21 22 }; 23 //鼠标弹起事件(松开) 24 box.onmouseup=function(e) { 25 body.onmousemove=null;//不做任何操作//dom0级事件解除事件绑定 26 //获取当前鼠标移动到的坐标点 27 var mx=e.clientX; 28 var my=e.clientY; 29 //盒子距离浏览器 30 box.style.left=mx-x +"px"; 31 box.style.top=my-y +"px"; 32 } 33 };
