1：鼠标在元素上的坐标位置 offsetX offsetY 2:鼠标在浏览器（可视窗口）上的坐标位置 clientX clientY 3：事件
onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标弹起4:可视窗口的宽度和高度
document.documentElement.clientWidth document.documentElement.clientHeight5:获取元素的宽高
offsetWidth offsetHeight6:获取元素到浏览器窗口的距离
offsetLeft offsetTop简单拖拽效果图 具体代码入下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: pink; position: absolute; } </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> //拖拽思路 // 1：光标移到拖拽元素上，按住鼠标不松手 // 2：开始在可视区域移动光标。被拖拽的元素跟随 // 3：松开鼠标，被拖拽的元素停止移动 var obox=document.getElementById('box'); obox.onmousedown=function(e){ var e=e||window.event; x=e.offsetX;//获取光标在div元素的坐标位置 y=e.offsetY; document.onmousemove=function(e){ var e=e||window.event; obox.style.left=e.clientX-x+'px'; obox.style.top=e.clientY-y+'px'; console.log(e.clientX+',,,'+x)//251,,,98 } // e.clientX是光标在可视区域的坐标位置 // e.offsetX;//获取光标在div元素的坐标位置 // 光标在可视区域的值-获取光标在div元素的值 为什么两个值要减一下？ // 两个值相减的目的，就是可以让光标在div上任意位置就行拖拽 } obox.onmouseup=function(){ document.onmousemove=0; // document.οnmοusemοve=后面可以赋值 null 0 false ' ' } </script> </html>拖拽碰撞效果图 代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background: red; position: absolute; } #box2{ width: 100px; height: 100px; background: yellow; position: fixed; top:300px; left:300px; } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> </body> <script type="text/javascript"> //碰撞思路 //1：拖拽div1元素 //2：当div1的底边碰到div2的上边，div2变色 // 当div1的上边碰到div2的底边，div2变色 // 当div1的左边碰到div2的右边，div2变色 // 当div1的右边碰到div2的左边，div2变色 // 3：如何做到当div1的底边碰到div2的上边，div2就变色呢？ // 先得到div1元素底边到顶部距离？odiv1.offsetTop+odiv1.offseHeight // 再得到div2元素上边到顶部距离？odiv2.offsetTop // 如果判断div1底边到顶部的距离>div2元素上边到顶部距离,那么就让div2变色 var ored=document.getElementById('box1'); var oyellow=document.getElementById('box2'); ored.onmousedown=function(e){ var e=e||window.event; var x=e.offsetX; var y=e.offsetY; document.onmousemove=function(e){ var e=e||window.event; ored.style.left=e.clientX-x+'px'; ored.style.top=e.clientY-y+'px'; //求红色底边到顶部的距离 var ored_b=ored.offsetHeight+ored.offsetTop; //求红色上边到顶部的距离 var ored_t=ored.offsetTop; //求红色左边到浏览器左边的距离 var ored_l=ored.offsetLeft; //求红色右边到浏览器左边的距离 var ored_r=ored.offsetWidth+ored.offsetLeft; //求黄色上边到顶部的距离 var oyellow_t=oyellow.offsetTop; //求黄色底边到顶部的距离 var oyellow_b=oyellow.offsetHeight+oyellow.offsetTop; //求红色左边到浏览器左边的距离 var oyellow_l=oyellow.offsetLeft; //求红色右边到浏览器左边的距离 var oyellow_r=oyellow.offsetWidth+oyellow.offsetLeft; //我们现在已经求出了 两个元素四个边的值！ //红色底边到顶部的距离>黄色上边到顶部的距离 黄色变蓝 //红色上边到顶部的距离<黄色底边到顶部的距离 黄色变蓝 //红色左边到左部的距离<黄色右边到左部的距离 黄色变蓝 //红色右边到左部的距离>黄色左边到左部的距离 黄色变蓝 if(ored_b<oyellow_t||ored_t>oyellow_b||ored_l>oyellow_r||ored_r<oyellow_l){ oyellow.style.background='yellow'; }else{ oyellow.style.background='blue'; } } } ored.onmouseup=function(){ document.onmousemove=null; } </script> </html>