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