滑鼠拖拽效果原理及完整代碼實作

遮罩浮層效果做出來很簡單，但是如果加了滑鼠拖拽效果就會顯得檔次更高了，今天來分享下滑鼠拖拽效果。

滑鼠拖拽效果最主要的事件有三個，也是三個階段，分别為mousedown,mousemove,mouseup。我們先來分析一哈每個過程的重點。

1>  mousedown即滑鼠按下階段，這個階段我們要确定滑鼠相對于浮層的位置，并将浮層設定為可拖拽狀态。

2>  mousemove即滑鼠移動階段，這裡需要知道滑鼠經過移動後的新位置，并計算出浮層移動後的位置，并設定可移動範圍，防止出現滾動條。

3>  mouseup技滑鼠放開階段，這個階段，隻需将可拖拽狀态設定為不可拖拽即可。

下面為核心代碼：

function mouseDraggle(id){      

$_id(id).addEventListener("mousedown",function(e){
    var el=e||window.event;//為了相容Ie
    //計算出滑鼠相對于浮層的位置
   startX = el.pageX-$_id(id).offsetLeft;
   startY = el.pageY-$_id(id).offsetTop;
   isDraggle = true;
});
document.onmousemove=function(e){
    //目前浮層元素的位置
   var el = e||window.event;//為了相容Ie，ie中事件對象包含于window對象中
   var mouseX = el.pageX - startX;
   var mouseY = el.pageY - startY;
   //擷取頁面的大小
   var bodyW = document.documentElement.clientWidth;
   var bodyH = document.documentElement.clientHeight;
    //擷取浮層的大小
   var partWidth = $_id(id).offsetWidth;
    var partHeight = $_id(id).offsetHeight;
    
    var maxWidth = bodyW - partWidth;//浮層可移動的最大width
    var maxHeight = bodyH - partHeight;//浮層可移動的最大height
    //在可拖拽的狀态下進行限制拖拽的範圍，不然會出現醜的滾動條
   if(isDraggle == true){
        var moveX = Math.min(maxWidth,Math.max(0,mouseX));
        var moveY =  Math.min(maxHeight,Math.max(0,mouseY));
         $_id(id).style.left = moveX + 'px';
         $_id(id).style.top = moveY + 'px';
   }
 
};
document.onmouseup = function(){
    isDraggle = false;
}
}      

這是上面三種狀态的代碼，需要注意的我已經在代碼中進行了注釋。

ps：

1.在事件監聽時，第一個關于事件的參數不加on,而window,document需要加on。

2.pageX和pageY如果有滾動條的話，此時滑鼠的位置還包括滾動的width和height；而clientX和clientY則不包括滾動的長度，是以在沒有滾動條時，clientX=pageX,clienY=pageY。