<html> <head> <style> div { width: 100px; height: 100px; background: pink; position: relative; top: 10px; left: 10px; } </style> </head> <body> <div>me</div> <script> var div=document.querySelector("div"); var offsetX,offsetY; //定義全域變數用于接識訓鼠坐標的變數 div.addEventListener("mousedown",mouseHandler); function mouseHandler(e){ //事件的執行函式自帶引數e if(e.type==="mousedown"){ //e.type是執行事件的型別 offsetX=e.offsetX; offsetY=e.offsetY; document.addEventListener("mousemove",mouseHandler) document.addEventListener("mouseup",mouseHandler) //如果有滑鼠移動或松開事件的發生再次執行mouseHandler函式 }else if(e.type==="mousemove"){ div.style.left=e.clientX-offsetX+"px"; //滑鼠相對當前可視視窗的坐標 - 相對元素左上角的坐標 div.style.top=e.clientY-offsetY+"px"; }else if(e.type==="mouseup"){ document.removeEventListener("mousemove",mouseHandler); document.removeEventListener("mouseup",mouseHandler); //洗掉滑鼠移動和滑鼠松開事件 } } </script> </body> </html>
注意：div元素要設定定位才可以進行移動，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/77937.html
標籤：JavaScript
上一篇：JS陣列轉字串（3種方法）【轉】