JS鼠標的拖拽原理

拖拽功能主要是用在讓用戶作一些自定義的動做，好比拖動排序，彈出框拖動移動等等，效果仍是蠻不錯的。下面講解一下拖拽的原理，但願能夠幫助到有須要的朋友！

1、拖拽的流程動做
①鼠標按下
②鼠標移動
③鼠標鬆開

2、拖拽流程中對應的JS事件
①鼠標按下會觸發onmousedown事件

obj.onmousedown = function(e) {
      //..........
}

②鼠標移動會觸發onmousemove事件

obj.onmousemove = function(e) {
    //......
}

③鼠標鬆開會觸發onmouseup事件

obj.onmouseup = function() {
     //......
}

3、實現的原理講解
拖拽實際上是經過獲取鼠標移動的距離來實現的，即計算移動前的位置的座標（x，y）與移動中的位置的座標（x，y）差值。
當鼠標按下或鼠標移動時，均可以獲取到當前鼠標的位置，即移動前的位置與移動中的位置。
那麼上面①與②的代碼就應該變成這樣

var mouseDownX,mouseDownY  // 因在移動中需計算鼠標的偏移須要用到鼠標按下時的座標，固聲明稱全局變量
obj.onmousedown = function(e) {
    mouseDownX = e.pageX;
    mouseDownY = e.pageY;
}

obj.onmousemove = function(e) {
    var mouseMoveX = e.pageX,mouseMoveY = e.pageY;
}

移動前與移動後坐標有了，那麼計算偏移，先看下圖

 

很明顯移動後元素的X座標爲  鼠標移動後的X座標 - 鼠標按下的X座標 + 元素的初始X座標
Y座標爲  鼠標移動後的Y座標 - 鼠標按下的Y座標 + 元素的初始Y座標
把新的 X，Y 替換元素的 X，Y 就搞定了。
那麼代碼就應該更換爲：

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;
}
obj.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";
    }

}
obj.onmouseup = function() {
    //標識已鬆開鼠標
    flag = false;
}

須要注意的事，若是用jquery庫來寫的話三個事件爲mousedown、mousemove、mouseup，名稱稍微有點差異。

 

還有一點，被拖拽的元素的樣式要設置成絕對或相對位置纔有效果。

至此，最簡單的元素拖拽功能就講完了~~~~

若有不正確之處歡迎你們指正！