關於拖拽

一直以爲拖拽能與用戶互動，像咱們日常的拖動排序、彈出框拖動移動等用戶自定義的動做都是拖拽實現的，它是一個比較有意思的角兒，今天我好好總結了一下下。
拖拽動做：按下、移動、鬆開
一、鼠標按下

obj.onmousedown = function(e){

}

二、鼠標移動

obj.onmousemove = function(e){

}

三、鼠標鬆開

obj.onmouseup = function(e){
    
    }

原理：這裏我找到一個圖片很形象，我決定bia給你們看看，主要就是鼠標移動的座標和元素座標之間的關係～

移動後元素的X座標＝鼠標移動後的X座標 - 鼠標按下的X座標 + 元素的初始X座標 
移動後元素的Y座標＝鼠標移動後的Y座標 - 鼠標按下的Y座標 + 元素的初始Y座標

說白了就是求元素移動的座標：

這裏的中心是鼠標［見方法一］
元素移動後的x、y座標＝鼠標移動後按下的偏移量＋元素的初始座標
也能夠這樣，原理是相通的：這裏的中心是元素［見方法二］
元素移動後的x、y座標＝鼠標移動後的x、y座標－（鼠標按下的xy座標－元素初始座標）

*注意：元素拖拽得定位一下，才能脫離文檔流*    推薦法二

方法一：

var mouseDownX,mouseDownY,initX,initY,flag = false;  
obj.onmousedown = function(e) {  
    //鼠標按下時的鼠標所在的X，Y座標  
    mouseDownX = e.pageX;  
    mouseDownY = e.pageY;  
  
    //初始位置的X，Y 座標  
    initX = obj.offsetLeft;  
    initY = obj.offsetTop;  
  
    //表示鼠標已按下  
    flag = true;  
}  
document.onmousemove = function(e) {  
    // 確保鼠標已按下  
    if(flag) {  
        var mouseMoveX = e.pageX,mouseMoveY = e.pageY;  
        this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px";  
        this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px";  
    }  
      
}  
document.onmouseup = function() {  
    //標識已鬆開鼠標  
    flag = false;  
}

方法二：

oDiv.onmousedown=function(ev){    
               var x=ev.pageX-oDiv.offsetLeft;
               var y=ev.pageY-oDiv.offsetTop;
               document.onmousemove=function(ev){
                   var l=ev.pageX-x;
                   var t=ev.pageY-y;
                   oDiv.style.left=l+'px';
                   oDiv.style.top=t+'px';
               }
               document.onmouseup=function () {
                   document.onmousemove=null;
                   document.onmouseup=null;
               }
           }

移動端不是mousedown、mousemove和mouseup

相應的應是touchstart、touchmove和touchend