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

一、拖拽的流程動作

①鼠標按下

②鼠標移動

③鼠標松開

拖拽原理

1.鼠標按下+鼠標移動 ?= ?拖拽 ? ? ?事件 ?onmousedown + ?onmousemove ?

2.鼠標松開 ?= ?無拖拽 ? ? ? ? ? ? ? ? ?停止拖拽 ?onmouseup

3.鼠標偏移 ?= ? 拖拽距離?

二、拖拽流程中對應(yīng)的JS事件

①鼠標按下會觸發(fā)onmousedown事件

②鼠標移動會觸發(fā)onmousemove事件

③鼠標松開會觸發(fā)onmouseup事件

三、實現(xiàn)的原理講解

拖拽其實是通過獲取鼠標移動的距離來實現(xiàn)的，即計算移動前的位置的坐標（x，y）與移動中的位置的坐標（x，y）差值。

當鼠標按下或鼠標移動時，都可以獲取到當前鼠標的位置，即移動前的位置與移動中的位置。

那么上面①與②的代碼就應(yīng)該變成這樣

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

很明顯移動后元素的X坐標為? 鼠標移動后的X坐標 - 鼠標按下的X坐標 + 元素的初始X坐標

Y坐標為? 鼠標移動后的Y坐標 - 鼠標按下的Y坐標 + 元素的初始Y坐標

把新的 X，Y 替換元素的 X，Y 就搞定了。

那么代碼就應(yīng)該更換為：

需要注意的事，如果用jquery庫來寫的話三個事件為mousedown、mousemove、mouseup，名稱稍微有點差別。

注意：（1）被拖拽的元素的樣式要設(shè)置成絕對或相對位置才有效果。

?????????? （2）拖拽加到document，不然內(nèi)容會脫離