javascript實(shí)現(xiàn)完美拖拽效果
拖拽的原理
1.獲取距離(鼠標(biāo)的位置-odiv的外邊距)
2.理解什么時(shí)候用onmousemove事件
3.判斷是否過(guò)界
html代碼:
<div id="div1"></div>
css代碼:
#div1{width:100px;height:100px;background:red;position:absolute}
javascript代碼:
window.onload=function(){ var oDiv=document.getElementById("div1"); var x=0; var y=0; oDiv.onmousedown=function(ev){ var oEvent=ev||event; //鼠標(biāo)的橫坐標(biāo)減去div的offsetLeft x=oEvent.clientX-oDiv.offsetLeft; //鼠標(biāo)的縱坐標(biāo)減去div的offsetTop y=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function(ev){ var oEvent=ev||event; var left=oEvent.clientX-x; var right=oEvent.clientY-y; //判斷左邊是否過(guò)界 if(left<0){ left=0; } //判斷右邊是否過(guò)界 else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){ left=document.documentElement.clientWidth-oDiv.offsetWidth; } //判斷上邊是否過(guò)界 if(right<0){ right=0; } //判斷下邊是否過(guò)界 else if(right>document.documentElenment.clientHeight){ right=document.documentElenment.clientHeight-oDiv.offsetHeight; } oDiv.style.left=left+"px"; oDiv.style.top=right+"px"; } document.onmouseup=function(){ //清空document的事件 document.onmousemove=null; document.onmouseup=null; } //解決低版本火狐bug,干掉系統(tǒng)默認(rèn) return false; } }
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- Javascript實(shí)現(xiàn)重力彈跳拖拽運(yùn)動(dòng)效果示例
- JS實(shí)現(xiàn)的3D拖拽翻頁(yè)效果代碼
- JS拖拽插件實(shí)現(xiàn)步驟
- js實(shí)現(xiàn)簡(jiǎn)單div拖拽功能實(shí)例
- JS+CSS實(shí)現(xiàn)帶有碰撞緩沖效果的豎向?qū)Ш綏l代碼
- javascript實(shí)現(xiàn)10個(gè)球隨機(jī)運(yùn)動(dòng)、碰撞實(shí)例詳解
- javascript制作游戲開發(fā)碰撞檢測(cè)的封裝代碼
- JS實(shí)現(xiàn)判斷碰撞的方法
- JavaScript運(yùn)動(dòng)減速效果實(shí)例分析
- JavaScript拖拽、碰撞、重力及彈性運(yùn)動(dòng)實(shí)例分析
相關(guān)文章
JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)時(shí)間表動(dòng)態(tài)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07JavaScript接口的實(shí)現(xiàn)三種方式(推薦)
這篇文章主要介紹了JavaScript接口的實(shí)現(xiàn)三種方式,有注釋法,檢查屬性法和鴨式辨行法,非常不錯(cuò),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-06-06微信小程序中上傳圖片并進(jìn)行壓縮的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序中上傳圖片并進(jìn)行壓縮的實(shí)現(xiàn)代碼,文中提到了上傳圖片并進(jìn)行壓縮的屬性值,需要的朋友可以參考下2018-08-08javascript內(nèi)存分配原理實(shí)例分析
這篇文章主要介紹了javascript內(nèi)存分配原理,結(jié)合實(shí)例形式分析了javascript原始值和引用值內(nèi)存分配的原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-04-04jfinal與bootstrap的登出實(shí)戰(zhàn)詳解
這篇文章主要為大家詳細(xì)介紹了jfinal與bootstrap的登出實(shí)戰(zhàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果
這篇文章主要介紹了通過(guò)原生js實(shí)現(xiàn)fadein 和 fadeout淡入淡出效果,需要的朋友可以參考下2014-06-06微信小程序如何刷新當(dāng)前界面的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序如何刷新當(dāng)前界面的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn)
JSCode all of Brower 全局屏蔽網(wǎng)頁(yè)右鍵功能 具體實(shí)現(xiàn),需要的朋友可以參考一下2013-06-06如何基于webRTC實(shí)現(xiàn)人臉識(shí)別功能
WebRTC技術(shù)包含了音視頻編解碼技術(shù)、傳輸技術(shù)、流媒體服務(wù)器技術(shù)等,涵蓋了音視頻處理和傳輸?shù)姆椒矫婷?下面這篇文章主要給大家介紹了關(guān)于如何基于webRTC實(shí)現(xiàn)人臉識(shí)別的相關(guān)資料,需要的朋友可以參考下2022-12-12