只记录left，top同理。
clientX：返回鼠标相对于浏览器的水平坐标；
offsetLeft：返回当前对象距离浏览器（父对象）的左侧距离；
offsetWidth：对象的可见宽度；
onmousemove：鼠标移动事件；
连接点是鼠标放在div上拖动时的位置（坐标）不会改变的，起名字为unchangX；
鼠标拖动事件是利用position：absolute绝对定位改变left和top，left的位置是通过clientX-unchangeX得到的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标拖拽事件</title> <style type="text/css"> #box{ width:100px; height:100px; background-color:cornflowerblue; position:absolute; left:0; top:0; } </style> </head> <body> <div id="box"></div> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("box"), unchangeX = 0, unchangeY = 0; oDiv.onmousedown =function(ev){//鼠标按下 var oEvent=ev||event; var unchangeX = oEvent.clientX - oDiv.offsetLeft;//鼠标的x坐标减去box的左边距离，unchangeX这个距离是不会变的，通过这个新鼠标的X坐标减去unchangeX就是box的Left var unchangeY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function(ev){//为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件 var oEvent = ev||event; var oLeft = oEvent.clientX - unchangeX; var oTop = oEvent.clientY - unchangeY; //优化部分：鼠标移动到浏览器左侧、右侧、上侧、下侧时的问题 if(oLeft < 0){ oLeft = 0; }else if(oLeft>document.documentElement.clientWidth - oDiv.offsetWidth){ oLeft = document.documentElement.clientWidth - oDiv.offsetWidth; } if(oTop < 0){ oTop = 0; }else if(oTop>document.documentElement.clientHeight - oDiv.offsetHeight){ oTop = document.documentElement.clientHeight - oDiv.offsetHeight; } oDiv.style.left = oLeft + \'px\'; oDiv.style.top = oTop + \'px\'; }; document.onmouseup = function(){//鼠标松开时 document.onmousemove = null;//把鼠标移动清除 document.onmouseup = null;//把鼠标松开清除 }; return false; }; } </script> </body> </html>