JS鼠標的拖拽原理

拖拽功能主要是用在讓用戶做一些自定義的動作，比如拖動排序，彈出框拖動移動等等，效果還是蠻不錯的。下面講解一下拖拽的原理，希望可以幫助到有需要的朋友！

一、拖拽的流程動作
①鼠標按下
②鼠標移動
③鼠標松開

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

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

②鼠標移動會觸發onmousemove事件

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

③鼠標松開會觸發onmouseup事件

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

三、實現的原理講解
拖拽其實是通過獲取鼠標移動的距離來實現的，即計算移動前的位置的坐標（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，名稱稍微有點差別。

 

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

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

如有不正確之處歡迎大家指正！