本文實例講述了JS鼠標拖拽實現方法。分享給大家供大家參考,具體如下:
JS代碼:
<script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) //鼠標按下DIV { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; //鼠標的X坐標減去DIV的左邊距就等於disX, 這個disXs是用於確定鼠標移動DIV時鼠標點和DIV之間的左面距離,這個距離是不會變的,通過這個新鼠標的X坐標減去disX就是DIV的Left disY=oEvent.clientY-oDiv.offsetTop; //鼠標的Y坐標減去DIV的左邊距就等於disY, 這個disY是用於確定鼠標移動DIV時鼠標點和DIV之間的上面距離,這個距離是不會變的,通過這個新鼠標的Y坐標減去disY就是DIV的Top document.onmousemove=function(ev) //為了防止鼠標移動太快而離開了DIV產生了bug,所以要給整個頁面加onmousemove事件 { var oEvent=ev||event; var oLeft=oEvent.clientX-disX; //新鼠標X坐標減去disX,也就是鼠標移動DIV後的Left var oTop=oEvent.clientY-disY; //新鼠標Y坐標減去disY,也就是鼠標移動DIV後的Top if(oLeft<0) //當DIV的Left小於0,也就是移出左邊 { oLeft=0; //就把DIV的Left設置為0,就不能移出左邊 } else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕寬度減去DIV的寬度就得出了DIV到達最右邊的寬度,如果Left大於這個像素 { oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left設置為這個像素 } if(oTop<0) //當DIV的To小於0,也就是移出左邊 { oTop=0; //就把DIV的Top設置為0,就不能移出上邊 } else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度減去DIV的高度就得出了DIV到達最下面邊的像素,如果Top大於這個像素 { oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top設置為這個像素 } oDiv.style.left=oLeft+'px'; //DIV的Left設置為新鼠標X坐標減去disX的值 oDiv.style.top=oTop+'px'; //DIV的Top設置為新鼠標Y坐標減去disY的值 }; document.onmouseup=function() //鼠標松開時 { document.onmousemove=null; //把鼠標移動清楚 document.onmouseup=null; //把鼠標松開清楚 }; return false; //阻止FireFox的默認事件 bug }; }; </script>
完整代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style> div{width:200px;height:200px;background:black;position:absolute;top:0;left:0;} </style> <script> window.onload=function() { var oDiv=document.getElementById('div'); var disX=0; var disY=0; oDiv.onmousedown=function(ev) //鼠標按下DIV { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; //鼠標的X坐標減去DIV的左邊距就等於disX, 這個disXs是用於確定鼠標移動DIV時鼠標點和DIV之間的左面距離,這個距離是不會變的,通過這個新鼠標的X坐標減去disX就是DIV的Left disY=oEvent.clientY-oDiv.offsetTop; //鼠標的Y坐標減去DIV的左邊距就等於disY, 這個disY是用於確定鼠標移動DIV時鼠標點和DIV之間的上面距離,這個距離是不會變的,通過這個新鼠標的Y坐標減去disY就是DIV的Top document.onmousemove=function(ev) //為了防止鼠標移動太快而離開了DIV產生了bug,所以要給整個頁面加onmousemove事件 { var oEvent=ev||event; var oLeft=oEvent.clientX-disX; //新鼠標X坐標減去disX,也就是鼠標移動DIV後的Left var oTop=oEvent.clientY-disY; //新鼠標Y坐標減去disY,也就是鼠標移動DIV後的Top if(oLeft<0) //當DIV的Left小於0,也就是移出左邊 { oLeft=0; //就把DIV的Left設置為0,就不能移出左邊 } else if(oLeft>document.documentElement.clientWidth-oDiv.offsetWidth) //屏幕寬度減去DIV的寬度就得出了DIV到達最右邊的寬度,如果Left大於這個像素 { oLeft=document.documentElement.clientWidth-oDiv.offsetWidth; //就把Left設置為這個像素 } if(oTop<0) //當DIV的To小於0,也就是移出左邊 { oTop=0; //就把DIV的Top設置為0,就不能移出上邊 } else if(oTop>document.documentElement.clientHeight-oDiv.offsetHeight) //屏幕高度減去DIV的高度就得出了DIV到達最下面邊的像素,如果Top大於這個像素 { oTop=document.documentElement.clientHeight-oDiv.offsetHeight; //就把Top設置為這個像素 } oDiv.style.left=oLeft+'px'; //DIV的Left設置為新鼠標X坐標減去disX的值 oDiv.style.top=oTop+'px'; //DIV的Top設置為新鼠標Y坐標減去disY的值 }; document.onmouseup=function() //鼠標松開時 { document.onmousemove=null; //把鼠標移動清楚 document.onmouseup=null; //把鼠標松開清楚 }; return false; //阻止FireFox的默認事件 bug }; }; </script> </head> <body> <div id="div"></div> </body> </html>
希望本文所述對大家JavaScript程序設計有所幫助。