js拖拽效果的原理及實現
阿新 • • 發佈:2021-09-24
拖拽功能主要是用在讓使用者做一些自定義的動作,比如拖動排序,彈出框拖動移動等等
拖拽的流程動作
1、滑鼠按下 會觸發onmousedown事件
2、滑鼠移動 會觸發onmousemove事件
3、滑鼠鬆開 會觸發onmouseup事件
拖拽原理
1.滑鼠按下+滑鼠移動 = 拖拽-------事件 onmousedown + onmousemove
2.滑鼠鬆開 = 無拖拽--------停止拖拽 onmouseup
3.滑鼠偏移 = 拖拽距離
當點選dom的時候,記錄當前滑鼠的座標值,也就是x、y值,以及被拖拽的dom的top、left值,而且還要在滑鼠按下的回撥函式裡新增滑鼠移動的事件:
document.addckOlEpoTBEventListener(“mousemove”,moving,false)
和新增滑鼠抬起的事件
document.addEventListener(“mouseup”,function() { document.removeEventListener(“mousemove”,false); },false);
這個抬起的事件是為了解除滑鼠移動的監聽,因為只有在滑鼠按下才可以拖拽,抬起就停止不會移動了。
當滑鼠按下滑鼠移動的時候,記錄移動中的x、y值,那麼這個被拖拽的dom的top和left值就是:
top=滑鼠按www.cppcns.com下時記錄的dom的top值+(移動中的y值 - 滑鼠按下時的y值)http://www.cppcns.com
left=滑鼠按下時記錄的dom的left值+(移動中的x值 - 滑鼠按下時的x值);
//極簡單版 var div=document.querySelector("div"); // 按下時開始監聽在文件中滑鼠移動的事件 // 開始監聽滑鼠鬆開鍵的事件 // 只有按下時才準備拖拽 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){ www.cppcns.comoffsetX=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、被拖拽的元素的樣式要設定成絕對或相對位置才有效果。
b、拖拽加到document,不然內容會脫離
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。