界面如圖所示： 要求：在“信息註冊”欄，按下滑鼠，然後滑鼠在頁面移動，在滑鼠移動過程中，該視窗跟著滑鼠移動，當滑鼠鬆開的時候，視窗停止移動。點擊“關閉”，該視窗隱藏。 實現思路： 1.頁面結構分析：一個大盒子d-box來確定位置，裡面放一個小盒子drop（存放“註冊信息（可以拖拽”文字和span標簽 ...
界面如圖所示：
要求：在“信息註冊”欄，按下滑鼠，然後滑鼠在頁面移動，在滑鼠移動過程中，該視窗跟著滑鼠移動，當滑鼠鬆開的時候，視窗停止移動。點擊“關閉”，該視窗隱藏。
實現思路：
1.頁面結構分析：一個大盒子d-box來確定位置，裡面放一個小盒子drop（存放“註冊信息（可以拖拽”文字和span標簽，span存放“關閉”，id為box_close），滑鼠在drop中按下，移動時候d-box跟著移動。
2.實現分析：
2.1 獲取滑鼠在盒子中的位置。通過滑鼠在頁面中的位置-盒子在頁面的位置實現
①滑鼠在頁面的位置實現代碼：
var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
②盒子在頁面中位置實現代碼：
var box_x=box.offsetLeft;
var box_y=box.offsetTop;
③滑鼠在盒子中的位置實現代碼：
var mouse_in_box_x=x-box_x;
var mouse_in_box_y=y-box_y;
2.2 獲取滑鼠移動時盒子移動的位置。通過滑鼠移動時，滑鼠在頁面的位置-滑鼠在盒子中的位置實現。
①滑鼠在頁面的位置
var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
②滑鼠移動時盒子移動的位置代碼實現：
var boxX=x-mouse_in_box_x;
var boxY=y-mouse_in_box_y;
2.3 給盒子樣式賦值
box.style.left=boxX+'px';
box.style.top=boxY+'px';
3.註意：
①要移動的盒子，其pisition必須賦值，absolute或者relative，必須使其脫離文檔流才能移動
②給盒子樣式賦值時，一定要註意不能丟掉px單位
③事件對象e，位置e.pageX,滾動條滾動距離的相容性。以前的博文裡面有記錄，完整代碼中也做了處理。
完整代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>滑鼠拖拽案例</title> 6 7 <style type="text/css"> 8 *{ 9 margin: 0px; 10 padding: 0px; 11 } 12 13 .d-box{ 14 width: 400px; 15 height: 300px; 16 border: 5px solid #eee; 17 box-shadow: 2px 2px 2px 2px #666; 18 position: absolute; 19 top: 40%; 20 left: 40%; 21 background-color: white; 22 } 23 24 .hd{ 25 height: 25px; 26 background-color: #7c9299; 27 color: white; 28 line-height: 25px; 29 cursor: move; 30 border-bottom: 1px solid #369; 31 } 32 #box_close{ 33 float: right; 34 cursor: pointer; 35 } 36 </style> 37 </head> 38 <body> 39 <div id="d-box" class="d-box"> 40 <div id="drop" class="hd">註冊信息（可以拖拽） 41 <span id="box_close">【關閉】</span> 42 </div> 43 </div> 44 45 <!-- 插入JS代碼 --> 46 <script type="text/javascript"> 47 /****************************盒子拖拽功能********************************/ 48 //點擊拖拽的“註冊信息欄”，拖動整個盒子的移動。首先獲得要拖拽的盒子 49 var box=document.getElementById('d-box'); 50 var drop=document.getElementById('drop'); 51 drop.onmousedown=function(e){ 52 e = e || window.event; 53 //當滑鼠按下的時候,獲得滑鼠在盒子中的位置 54 //滑鼠在盒子中的位置=滑鼠在頁面中的位置-盒子在頁面的位置 55 //滑鼠在頁面中的位置 56 var x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); 57 var y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); 58 59 //盒子在頁面中的位置 60 var box_x=box.offsetLeft; 61 var box_y=box.offsetTop; 62 //滑鼠在盒子中的位置 63 var mouse_in_box_x=x-box_x; 64 var mouse_in_box_y=y-box_y; 65 66 //註冊滑鼠移動事件,因為滑鼠按下後,在頁面移動,盒子跟著移動 67 document.onmousemove=function(e){ 68 e = e || window.event; 69 //滑鼠在頁面中移動時,求盒子的坐標 70 //滑鼠移動時盒子移動位置=滑鼠當前位置-滑鼠在盒子中移動的距離 71 x=e.pageX || e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); 72 y=e.pageY || e.clientY + (document.body.scrollTop || document.documentElement.scrollTop); 73 74 var boxX=x-mouse_in_box_x; 75 var boxY=y-mouse_in_box_y; 76 //px一定不能忘 77 box.style.left=boxX+'px'; 78 box.style.top=boxY+'px'; 79 } 80 } 81 82 //當滑鼠彈起時,移出滑鼠移動事件 83 drop.onmouseup=function(){ 84 document.onmousemove=null; 85 } 86 87 //點擊關閉盒子,隱藏盒子 88 var box_close=document.getElementById('box_close'); 89 box_close.onclick=function(){ 90 box.style.display='none'; 91 } 92 </script> 93 </body> 94 </html>
