在Web 開發中，為了提供良好的使用者體驗，經常會對頁面中的彈框提供可拖曳的特效，下面利用JavaScript中的滑鼠事件完成拖曳特效的實現。具體步囊如下。

(1)編寫HTML 頁面 

<div id-"box" class-"box">
<div id-"drop"class-"hd">註冊資訊(可以拖曳)
<span id-"box_close">【關閉】</span>
</div>
<div class="bd"></div>
</div>

上述程式碼定義了一個可以被拖曳的盒子，盒子的頂部是拖曳條，滑鼠在拖曳條上被按住就可以完成整個盒子的移動效果。
(2)滑鼠拖曳實現原理
　滑鼠拖曳的實現原理是根據滑鼠的移動位置來計算盒子的移動位置。首先，要通過 CSS 樣式為盒子設定定位，否則即使通過 JavaScript程式碼修改盒子的位置(left和top值)也無法完成移動。
　然後分析如何根據滑鼠的移動位置計算盒子的移動位置。
   盒子的位置(left和top值)=滑鼠的位置(left和top值)- 滑鼠按下時與盒子之間的距離(left 和 top 值)。由此可見，若要實現滑鼠拖曳效果，只要獲取滑鼠按下時與盒子之間的距離以及滑鼠移動後的位置，即可按這個公式計算出盒子移動後的位置。

（3）處理滑鼠按下事件

編寫JavaScript程式碼，為拖拽條新增mousedown事件及其處理程式，程式碼如下：

<script> 
//獲取被拖動的盒子和拖動條
var box- document.getElementById('box'); var drop s document.getElementById('drop');
drop.onmousedown=function(event){ 
//滑鼠在拖曳條上按下可拖曳盒子 
var event " event ll window.event;//獲取滑鼠按下時的位置
var pagex - event pagex Ll event.clientx + document.documentElemer.scrollLeft;
var pagey - event.pagey ll event.clientY + document.documentElemen.scrollTop;
//計算滑鼠按下的位置距盒子的位置 
var spacex = pageX - box.offsetLeft; 
var spaceY = pageY - box.offsetTop; 
};
</script>

　　上述第5~13行程式碼用於為拖曳條新增滑鼠按下事件及其處理程式。其中，第8~9行用於記錄滑鼠按下時距離文件左側和頂部的位置，第11~12行程式碼用於計算滑鼠按下時與盒子之間的距離。

(4)處理滑鼠移動事件

接下來，在上述第12行程式碼後新增以下程式碼，實現滑鼠的拖曳的特效，具體程式碼如下

document.onmousemove=function(event){
var event meventllwindow.event;
// 獲取移動後滑鼠的位置
var pageX=eventpageX1 event.clientX+documentdocumentElement.scrollLeft 
var pageY…event.pageYIevent.clientY+document.documentElement.scrollTop
// 計算並設定盒子移動後的位置 
box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px'; 
if(window.getSelection){ 
window.getSelection().removeAllRanges()); 
}else{ 
document.selection.empty();
}
};

　　上述第4~5行程式碼用於獲取滑鼠拖曳後的位置，第7~8行程式碼根據第(2)步中分析出的計算公式完成拖曳後盒子位置的計算與設定。第9~13行表示當用戶在拖曳條的文字上快速搶動時，避免選中上面的文字。同時，為了使使用者體驗更好，在滑鼠大幅度進行移動時，也能實現指曳效果，以上程式碼是通過為 document 文件繫結滑鼠移動事件來實現的。

（5）處理釋放滑鼠按鍵的事件

從以上的效果可以發現，使用者鬆開滑鼠按鍵後，依然可以進行拖曳。因此，下面需要為 document 新增一個釋放滑鼠按鍵的事件及其處理程式。在第(3)步第 13 行後新增以下程式碼，具體程式碼如下

document.onmouseup=function (){ 
document.onmousemove = null;
};

　　上述程式碼在釋放滑鼠按鍵的事件處理程式中，將document的滑鼠移動事件處理程式設定為 null，即可實現滑鼠鬆開時，再次移動滑鼠，盒子不發生拖曳特效。按照以上步驟完成所有實理後，即可實現滑鼠的拖曳特效。