js實現頁面中的拖拽運動
阿新 • • 發佈：2019-02-16
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0; padding: 0;} div{width: 800px; height: 40px; border: 5px solid cadetblue; background: orange;position: absolute;} </style> <script type="text/javascript"> window.onload=function(){ var oCl=document.getElementById('cl'); var disx=0;//用來裝滑鼠在拖動元素中的相對x軸位置 var disy=0;//<span style="font-family: Arial, Helvetica, sans-serif;">用來裝滑鼠在拖動元素中的相對y軸位置</span> oCl.onmousedown=function(ev){//滑鼠按下時換獲取座標 var oEvent=ev || event;//Event的相容性處理 disx=oEvent.clientX-oCl.offsetLeft;//求出<span style="font-family: Arial, Helvetica, sans-serif;">滑鼠在拖動元素中的相對x軸位置</span> disy=oEvent.clientY-oCl.offsetTop;//<span style="font-family: Arial, Helvetica, sans-serif;">求出</span><span style="font-family: Arial, Helvetica, sans-serif;">滑鼠在拖動元素中的相對x軸位置</span> document.onmousemove=function(ev){//滑鼠移動時賦給元素座標 var oEvent=ev || event; var left=oEvent.clientX-disx;//滑鼠當時的x座標減去<span style="font-family: Arial, Helvetica, sans-serif;">滑鼠在拖動元素中的相對x軸的值</span> var top=oEvent.clientY-disy;//<span style="font-family: Arial, Helvetica, sans-serif;">滑鼠當時的y座標減去</span><span style="font-family: Arial, Helvetica, sans-serif;">滑鼠在拖動元素中的相對y軸的值</span> if(left<0){ left=0;//防止移出螢幕左側外 } else if(left>document.documentElement.clientWidth-oCl.offsetWidth){ left=document.documentElement.clientWidth-oCl.offsetWidth;//防止移出螢幕右側外 } if(top<0){ top=0;//防止移出上方 } else if(top>document.documentElement.clientHeight-oCl.offsetHeight){ top=document.documentElement.clientHeight-oCl.offsetHeight;//防止移出下方 } oCl.style.left=left+'px'; oCl.style.top=top+'px';//賦值 } }; document.onmouseup=function(){ document.onmousemove=null;//防止滑鼠移動過快脫出元素範圍而無法繼續控制 } } </script> </head> <body> <div id="cl"></div> </body> </html>