這篇文章主要介紹了如何實現js拖拽效果及原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

元素拖拽分成3個步驟：按下鼠標，移動鼠標，松開鼠標。

拖拽原理：按下拖拽元素后開始監聽文檔中鼠標移動事件，然后再監聽鼠標松開事件；鼠標移動時，元素div要隨著鼠標一起移動，需要計算元素div位移的距離(移動的距離=鼠標離可視窗口的位置 – 鼠標在div中相對于左上角的位置)。然后松開鼠標時，刪除移動事件和松開事件，元素完成拖拽。

一開始先監聽鼠標按下事件mousedown，事件觸發執行mouseHandler函數；

div.addEventListener("mousedown",mouseHandler);

進入mouseHandler函數后，進行if else if 的判斷，如果是按下事件，就監聽鼠標移動和松開事件，這里要用document文檔來作為監聽對象，如果使用元素div監聽時，如果鼠標在移動過程超出了div元素，就無法拖拽元素；

進入移動事件，就把鼠標移動的距離(鼠標離可視窗口的位置 – 鼠標在div中相對于左上角的位置)賦值給元素的left和top，元素就可以隨著鼠標移動；

最后進入松開鼠標事件，刪除了移動和送開鼠標事件，元素就會停在鼠標松開的位置

關鍵：元素顯示位置=鼠標離可視窗口的位置 – 鼠標相對于在div元素左上角的位置

js代碼帶注釋

var div=document.querySelector("div");

var offsetX,offsetY;　　//定義全局變量用于接收鼠標坐標的變量

div.addEventListener("mousedown",mouseHandler);

function mouseHandler(e){ //事件的執行函數自帶參數e

if(e.type==="mousedown"){ //e.type是執行事件的類型

offsetX=e.offsetX;

offsetY=e.offsetY;

document.addEventListener("mousemove",mouseHandler)

document.addEventListener("mouseup",mouseHandler) //如果有鼠標移動或松開事件的發生再次執行mouseHandler函數

}else if(e.type==="mousemove"){

div.style.left=e.clientX-offsetX+"px"; //鼠標相對當前可視窗口的坐標 - 相對元素左上角的坐標

div.style.top=e.clientY-offsetY+"px";

}else if(e.type==="mouseup"){

document.removeEventListener("mousemove",mouseHandler);

document.removeEventListener("mouseup",mouseHandler); //刪除鼠標移動和鼠標松開事件

}

}

效果如圖：

注意：div元素要設置定位才可以進行移動。

以上就是本文的全部內容，希望對大家的學習有所幫助。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的php拖拽原理,JS拖拽效果及原理解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。