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

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

二、拖拽流程中對應的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，名稱稍微有點差別。
還有一點，被拖拽的元素的樣式要設定成絕對或相對位置才有效果。

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

如有不正確之處歡迎大家指正！
--------------------- 
作者：堅強di理由 
來源：CSDN 
原文：https://blog.csdn.net/qczxl/article/details/50159555 
版權宣告：本文為博主原創文章，轉載請附上博文連結！