JS鼠标拖拽
JS代码：
View Code
1 <script> 2 window.onload=function() 3 { 4 var oDiv=document.getElementById('div'); 5 var disX=0; 6 var disY=0; 7 8 oDiv.onmousedown=function(ev) //鼠标按下DIV 9 { 10 var oEvent=ev||event; 11 disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离，这个距离是不会变的，通过这个新鼠标的X坐标减去disX就是DIV的Left 12 disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离，这个距离是不会变的，通过这个新鼠标的Y坐标减去disY就是DIV的Top 13 14 document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件 15 { 16 var oEvent=ev||event; 17 var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left 18 var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top 19 20 if(oLeft<0) //当DIV的Left小于0，也就是移出左边 21 { 22 oLeft=0; //就把DIV的Left设置为0，就不能移出左边 23 } 24 else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度，如果Left大于这个像素 25 { 26 oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素 27 } 28 29 if(oTop<0) //当DIV的To小于0，也就是移出左边 30 { 31 oTop=0; //就把DIV的Top设置为0，就不能移出上边 32 } 33 else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素，如果Top大于这个像素 34 { 35 oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素 36 } 37 38 oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值 39 oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值 40 }; 41 42 document.onmouseup=function() //鼠标松开时 43 { 44 document.onmousemove=null; //把鼠标移动清楚 45 document.onmouseup=null; //把鼠标松开清楚 46 }; 47 return false; //阻止FireFox的默认事件 bug 48 }; 49 }; 50 </script>
完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;} 8 </style> 9 <script> 10 window.onload=function() 11 { 12 var oDiv=document.getElementById('div'); 13 var disX=0; 14 var disY=0; 15 16 oDiv.onmousedown=function(ev) //鼠标按下DIV 17 { 18 var oEvent=ev||event; 19 disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距就等于disX, 这个disXs是用于确定鼠标移动DIV时鼠标点和DIV之间的左面距离，这个距离是不会变的，通过这个新鼠标的X坐标减去disX就是DIV的Left 20 disY=oEvent.clientY-oDiv.offsetTop; //鼠标的Y坐标减去DIV的左边距就等于disY, 这个disY是用于确定鼠标移动DIV时鼠标点和DIV之间的上面距离，这个距离是不会变的，通过这个新鼠标的Y坐标减去disY就是DIV的Top 21 22 document.onmousemove=function(ev) //为了防止鼠标移动太快而离开了DIV产生了bug，所以要给整个页面加onmousemove事件 23 { 24 var oEvent=ev||event; 25 var oLeft=oEvent.clientX-disX; //新鼠标X坐标减去disX,也就是鼠标移动DIV后的Left 26 var oTop=oEvent.clientY-disY; //新鼠标Y坐标减去disY,也就是鼠标移动DIV后的Top 27 28 if(oLeft<0) //当DIV的Left小于0，也就是移出左边 29 { 30 oLeft=0; //就把DIV的Left设置为0，就不能移出左边 31 } 32 else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕宽度减去DIV的宽度就得出了DIV到达最右边的宽度，如果Left大于这个像素 33 { 34 oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left设置为这个像素 35 } 36 37 if(oTop<0) //当DIV的To小于0，也就是移出左边 38 { 39 oTop=0; //就把DIV的Top设置为0，就不能移出上边 40 } 41 else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度减去DIV的高度就得出了DIV到达最下面边的像素，如果Top大于这个像素 42 { 43 oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top设置为这个像素 44 } 45 46 oDiv.style.left=oLeft+'px'; //DIV的Left设置为新鼠标X坐标减去disX的值 47 oDiv.style.top=oTop+'px'; //DIV的Top设置为新鼠标Y坐标减去disY的值 48 }; 49 50 document.onmouseup=function() //鼠标松开时 51 { 52 document.onmousemove=null; //把鼠标移动清楚 53 document.onmouseup=null; //把鼠标松开清楚 54 }; 55 return false; //阻止FireFox的默认事件 bug 56 }; 57 }; 58 </script> 59 </head> 60 61 <body> 62 <div id="div"></div> 63 </body> 64 </html>
