1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 .div{ 13 width: 100px; 14 height: 100px; 15 background-color: aqua; 16 position: absolute; 17 } 18 19 20 </style> 21 22 <script> 23 //記錄鼠標是否按下 24 var isMouseDown=false; 25 //獲取鼠標剛按下時的位置 26 var offestX=0; 27 var offestY=0; 28 29 //文檔就緒函數 30 onload=function(e){ 31 //獲取div 32 var div=document.getElementsByClassName("div")[0]; 33 //鼠標按下事件,鼠標按下是相對div而言的 34 div.onmousedown=function(e){ 35 isMouseDown=true; 36 //記錄鼠標剛按下時的位置，相對物體div而言 37 offestX= e.offsetX; 38 offestY= e.offsetY; 39 40 } 41 42 43 //鼠標移動，鼠標移動是相對於整個頁面而言的，所以用document 44 document.onmousemove=function(e){ 45 //如何鼠標沒有按下就直接返回，不用執行下面的代碼 46 if(isMouseDown==false)return; 47 var x= e.pageX-offestX; 48 var y= e.pageY-offestY; 49 div.style.left=x+"px";//需要注意的是。position中的top和left的相對物體的左上角而言的。所以我們在鼠標移動時要重新計算左上角的位置 50 div.style.top=y+"px"; 51 } 52 //鼠標抬起 53 document.onmouseup=function(e){ 54 isMouseDown=false; 55 56 } 57 58 } 59 60 61 </script> 62 </head> 63 <body> 64 <div class="div" style="top: 0px;left: 0px"> 65 66 </div> 67 </body> 68 </html>
示圖講解：
