原生js實現拖拽功能

若是要設置物體拖拽，必須使用三個事件，分別是：

一、onmousedown:鼠標按下事件

二、onmousemove:鼠標移動事件

三、onmouseup:鼠標擡開事件

拖拽的原理：根據鼠標的移動來移動被拖拽的元素。鼠標的移動就是鼠標x、y座標的變化，元素的移動就是position的top和left的變化。

固然並非任什麼時候候移動鼠標都要使元素移動，應該判斷鼠標左鍵是否被按下，以及是否在可拖拽元素上按下的。

基本思路：

拖拽狀態 = 0鼠標在元素上按下的時候{   
  　　拖拽狀態 = 1   
 　　 記錄下鼠標的x和y座標   
  　　記錄下元素的x和y座標   
  }  
 鼠標在元素上移動的時候{   
  　　若是拖拽狀態是0就什麼也不作。   
  　　若是拖拽狀態是1，那麼   
  　　元素y = 如今鼠標y - 原來鼠標y + 原來元素y   
  　　元素x = 如今鼠標x - 原來鼠標x + 原來元素x   
  }    
 鼠標在任什麼時候候放開的時候{   
  　　拖拽狀態 = 0   
}

三個事件分別綁定的對象是什麼？

（1）onmousedown：綁定到被拖拽元素上

（2）onmousemove：綁定到document上，主要是爲了防止鼠標移動過快，鼠標超出元素範圍

（3）onmouseup：綁定到document上，主要是爲了防止鼠標移動過快，被移除目標元素，因此沒法處理鼠標鬆開事件

onmousemove、onmouseup是全局區域，也就是整個文檔通用，應該使用document對象而不是目標對象，不然目標對象只能往右方或者下方移動

 

考慮邊界

代碼實現：

window.onload=function(){
    var dragObj=document.getElementById('box');
    dragObj.style.left='0px';
    dragObj.style.top='0px';
                
    var mouseX,mouseY,objX,objY;
    var dragging=false;
    var diffX,diffY;

    dragObj.onmousedown=function(event){
        var event=event||window.event;        
        dragging=true;
                    
        mouseX=event.clientX;//初始位置時鼠標的座標
        mouseY=event.clientY;
        objX=dragObj.offsetLeft;//元素的初始位置
        objY=dragObj.offsetTop;
                    
        diffX=mouseX-objX;//至關於鼠標距物體左邊的距離
        diffY=mouseY-objY;
     }       
    document.onmousemove=function(event){
        var event=event||window.event;
        if(dragging){
            //元素左邊距等於鼠標移動的寬度加上元素自己的位置
            dragObj.style.left=event.clientX-mouseX+objX+"px";
            dragObj.style.top=event.clientY-mouseY+objY+"px";
                
             //設置邊界
            if((event.clientX-diffX)<0){//鼠標到瀏覽器左邊距小於鼠標到obj的左邊距
                dragObj.style.left=0+"px";
            }
            //window.innerWidth瀏覽器顯示區域的寬度，dragObj.offsetWidth物體寬度
            else if((event.clientX-diffX)>(window.innerWidth-dragObj.offsetWidth)){
                dragObj.style.left=window.innerWidth-dragObj.offsetWidth+"px";
            }
            if((event.clientY-diffY)<0){
                dragObj.style.top=0+"px";
            }
            else if((event.clientY-diffY)>(window.innerHeight-dragObj.offsetHeight)){
                dragObj.style.top=window.innerHeight-dragObj.offsetHeight+"px";
            }
        } 
    }
    document.onmouseup=function(){
        dragging=false;
    }
}
</script>    

 

obj.offsetLeft與obj.style.left的區別：

（1）offsetLeft：獲取當前對象左側距離父對象左側的值

　　style.left：獲取相對於具備定位屬性的父對象的左邊距。

（2）若是父對象的position定義爲relative,子對象的position定義爲absolute，那麼子對象的style.left的值是相對於父對象的值,等同於offsetLeft的值.

（3）offsetLeft返回的是數值，而style.left返回的是數字字符串，在使用時須要parseInt(style.left)；

（4）style.left能夠設置或更改，而offsetLeft只能獲取不能更改