JS實現(xiàn)拖拽的方法分析
本文實例分析了JS實現(xiàn)拖拽的方法。分享給大家供大家參考,具體如下:
分析:
1.鼠標(biāo)按下,拖拽開始,鼠標(biāo)移動,拖拽進(jìn)行,鼠標(biāo)抬起,拖拽結(jié)束(三個事件)
2.被拖動元素與鼠標(biāo)之間的位置在拖動過程中始終不變,利用這個原理,被拖動元素的位置就是鼠標(biāo)的左(上)邊距-鼠標(biāo)與被拖動元素之間的距離
注意:onmousemove應(yīng)該是在onmousedown發(fā)生時進(jìn)行,不然不需要點(diǎn)擊也能拖動了。
用戶可能會將拖動層脫出窗口外。
核心代碼:
window.onload=function(){ var box=document.getElementById("div"); var disX; var disY; box.onmousedown=function(ev){ //如果三個事件都用在box上,拖得快一點(diǎn),鼠標(biāo)脫離移動層,移動層就拖不動了 var oEvent=ev||event; disX=oEvent.clientX-box.offsetLeft; disY=oEvent.clientY-box.offsetTop; document.onmousemove=function(ev){ var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l<0){ l=0; }else if(l>document.documentElement.clientWidth-box.offsetWidth){ l=document.documentElement.clientWidth-box.offsetWidth; } if(t<0){ t=0; }else if(t>document.documentElement.clientHeight-box.offsetHeight){ t=document.documentElement.clientHeight-box.offsetHeight; } box.style.left=l+'px'; box.style.top=t+'px'; }; document.onmouseup=function(){ document.onmousemove=null; document.onmouseup=null; //鼠標(biāo)抬起來后,onmouseup事件本身也沒意義了,所以最好清理掉 }; return false; //阻止默認(rèn)行為,空的div在低版本ff下,第二次拖動手型會變異常 }; }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)
這篇文章主要介紹了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07走進(jìn)javascript——不起眼的基礎(chǔ),值和分號
本文主要介紹了javascript的基礎(chǔ)知識--值和分號,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之目錄結(jié)構(gòu)、基本配置,結(jié)合實例形式詳細(xì)分析了微信小程序的相關(guān)注冊、配置及基本使用方法,并配以圖片加以說明,需要的朋友可以參考下2019-03-03JS面向?qū)ο?、prototype、call()、apply()
那天用到prototype.js于是打開看看,才看幾行就滿頭霧水,原因是對js的面向?qū)ο蟛皇呛苁煜?,于是百?google了一把,最后終于算小有收獲,寫此紀(jì)念一下^_^。2009-05-05JavaScript網(wǎng)頁表單form中禁止自動提交的兩種方式
本文是我本人在開發(fā)網(wǎng)頁時,在表單中加入了button按鈕,本來是用于jQuery點(diǎn)擊相應(yīng)事件的按鈕,然后,但我點(diǎn)擊button時,發(fā)現(xiàn)不是達(dá)到j(luò)Query指定效果,所以在本文中,我們將討論網(wǎng)頁表單(form)中提交的兩種方式,需要的朋友可以參考下2024-06-06ES6 迭代器(Iterator)和 for.of循環(huán)使用方法學(xué)習(xí)(總結(jié))
這篇文章主要介紹了ES6 迭代器(Iterator)和 for.of循環(huán)使用方法學(xué)習(xí)總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-02