js拖拽效果的原理及實現(xiàn)
拖拽功能主要是用在讓用戶做一些自定義的動作,比如拖動排序,彈出框拖動移動等等
拖拽的流程動作
1、鼠標按下 會觸發(fā)onmousedown事件
2、鼠標移動 會觸發(fā)onmousemove事件
3、鼠標松開 會觸發(fā)onmouseup事件
拖拽原理
1.鼠標按下+鼠標移動 = 拖拽-------事件 onmousedown + onmousemove
2.鼠標松開 = 無拖拽--------停止拖拽 onmouseup
3.鼠標偏移 = 拖拽距離
當點擊dom的時候,記錄當前鼠標的坐標值,也就是x、y值,以及被拖拽的dom的top、left值,而且還要在鼠標按下的回調(diào)函數(shù)里添加鼠標移動的事件:
document.addEventListener(“mousemove”, moving, false)
和添加鼠標抬起的事件
document.addEventListener(“mouseup”,function() { document.removeEventListener(“mousemove”, moving, false); }, false);
這個抬起的事件是為了解除鼠標移動的監(jiān)聽,因為只有在鼠標按下才可以拖拽,抬起就停止不會移動了。
當鼠標按下鼠標移動的時候,記錄移動中的x、y值,那么這個被拖拽的dom的top和left值就是:
top=鼠標按下時記錄的dom的top值+(移動中的y值 - 鼠標按下時的y值)
left=鼠標按下時記錄的dom的left值+(移動中的x值 - 鼠標按下時的x值);
//極簡單版 var div=document.querySelector("div"); // 按下時開始監(jiān)聽在文檔中鼠標移動的事件 // 開始監(jiān)聽鼠標松開鍵的事件 // 只有按下時才準備拖拽 div.onmousedown=function(e1){ // 當鼠標在文檔移動時,不能再div上移動,因為鼠標可能離開div,造成無法拖拽 div.onmousemove=function(e){ // 當鼠標移動時,將當前鼠標相對視口的坐標賦值給元素的left和top // 因為我們需要在按下的位置拖拽,因此我們還需要獲取按下鍵鼠標相對div的左上角位置 // 使用當前鼠標位置減去這個相對元素的左上角位置,保證鼠標所按位置拖拽 div.style.left=e.clientX-e1.offsetX+"px"; div.style.top=e.clientY-e1.offsetY+"px"; } // 當釋放鼠標鍵時,刪除鼠標移動事件和刪除鼠標釋放事件 div.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; } } //簡單版 var div=document.querySelector("div"); var offsetX,offsetY; div.addEventListener("mousedown",mouseDownHandler); function mouseDownHandler(e){ offsetX=e.offsetX offsetY=e.offsetY document.addEventListener("mousemove",mousemoveHandler) document.addEventListener("mouseup",mouseupHandler) } function mousemoveHandler(e){ div.style.left=e.clientX-offsetX+"px" div.style.top=e.clientY-offsetY+"px" } function mouseupHandler(e){ document.removeEventListener("mousemove",mousemoveHandler) document.removeEventListener("mouseup",mouseupHandler) } // 簡單升級版 var div=document.querySelector("div"); var offsetX,offsetY; div.addEventListener("mousedown",mouseHandler); function mouseHandler(e){ if(e.type==="mousedown"){ offsetX=e.offsetX; offsetY=e.offsetY; document.addEventListener("mousemove",mouseHandler) document.addEventListener("mouseup",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) } }
注
a、被拖拽的元素的樣式要設(shè)置成絕對或相對位置才有效果。
b、拖拽加到document,不然內(nèi)容會脫離
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
element 中 el-menu 組件的無限極循環(huán)思路代碼詳解
這篇文章主要介紹了element 中 el-menu 組件的無限極循環(huán),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-04基于JS實現(xiàn)bookstore靜態(tài)頁面的實例代碼
本文給大家分享一段核心代碼基于js實現(xiàn)的bookstore靜態(tài)頁面,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下2017-02-02JavaScript中的location、history、navigator對象實例介紹
這篇文章主要介紹了JavaScript中的location、history、navigator對象實例介紹,需要的朋友可以參考下2023-05-05原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法
這篇文章主要介紹了原生JS實現(xiàn)動態(tài)加載js文件并在加載成功后執(zhí)行回調(diào)函數(shù)的方法,涉及javascript動態(tài)創(chuàng)建頁面元素、事件監(jiān)聽、回調(diào)函數(shù)使用等相關(guān)操作技巧,需要的朋友可以參考下2018-09-09使用json對象轉(zhuǎn)化為key,value的對象數(shù)組
這篇文章主要介紹了使用json對象轉(zhuǎn)化為key,value的對象數(shù)組方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-06-06VsCode插件自動生成注釋插件koroFileHeader使用教程
這篇文章主要介紹了VsCode插件自動生成注釋插件koroFileHeader使用教程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01