js仿百度登錄頁(yè)實(shí)現(xiàn)拖動(dòng)窗口效果
在web開(kāi)發(fā)中,鼠標(biāo)拖拽效果非常常見(jiàn),例如百度的登錄頁(yè),點(diǎn)擊登錄會(huì)彈出一個(gè)窗口,并且這個(gè)窗口可以拖動(dòng);那么這樣的拖拽效果如何實(shí)現(xiàn)呢 ?其實(shí)實(shí)現(xiàn)很簡(jiǎn)章,搞清楚他的原理就很容易了;首當(dāng)其沖的,要涉及到鼠標(biāo)的三個(gè)事件,分別為鼠標(biāo)按下、移動(dòng)、松開(kāi);在這三個(gè)事件里分別計(jì)算元素鼠標(biāo)的位置即可;
復(fù)制代碼
/******* 拖拽原理1: 拖拽狀態(tài) = 0 鼠標(biāo)在元素上按下的時(shí)候 { 拖拽狀態(tài) = 1 記錄下鼠標(biāo)的x和y坐標(biāo) 記錄下元素的x和y坐標(biāo) } 鼠標(biāo)在元素上移動(dòng)的時(shí)候 { 如果拖拽狀態(tài)是0就什么也不做。 如果拖拽狀態(tài)是1, 那么 元素y = 現(xiàn)在鼠標(biāo)y - 原來(lái)鼠標(biāo)y + 原來(lái)元素y 元素x = 現(xiàn)在鼠標(biāo)x - 原來(lái)鼠標(biāo)x + 原來(lái)元素x } 鼠標(biāo)在任何時(shí)候放開(kāi)的時(shí)候 { 拖拽狀態(tài) = 0 } 將以上思路翻譯成JS代碼就可以實(shí)現(xiàn)拖拽的效果了。 *******/ 上面這個(gè)原理也可以演變?yōu)椋? /******* 拖拽原理2: 拖拽狀態(tài) = 0 鼠標(biāo)在元素上按下的時(shí)候 { 拖拽狀態(tài) = 1 記錄下鼠標(biāo)的x和y坐標(biāo) 記錄下元素的x和y坐標(biāo) 元素的偏移值X=元素的X-元素的offsetLeft 元素的偏移值Y=元素的Y-元素的offsetTop } 鼠標(biāo)在元素上移動(dòng)的時(shí)候 { 如果拖拽狀態(tài)是0就什么也不做。 如果拖拽狀態(tài)是1, 那么 元素y = 現(xiàn)在鼠標(biāo)y -元素的偏移值X 元素x = 現(xiàn)在鼠標(biāo)x -元素的偏移值Y } 鼠標(biāo)在任何時(shí)候放開(kāi)的時(shí)候 { 拖拽狀態(tài) = 0 } 將以上思路翻譯成JS代碼就可以實(shí)現(xiàn)拖拽的效果了。 *******/
上面兩種思路其實(shí)是異曲同工,需要注意的是在移動(dòng)事件里,還要處理元素邊緣的位置,以防止元素被拖動(dòng)的時(shí)候拖到瀏覽器以外的地方;直接來(lái)看代碼:
代碼一:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS拖拽</title> <style> *{padding: 0; margin: 0; } .box{width: 100px;height: 100px;background: blue;position: absolute; } </style> <script> var isDown = false; var ObjLeft, ObjTop, posX, posY, obj; window.onload = function() { obj = document.getElementById('box'); obj.onmousedown = down; document.onmousemove = move; document.onmouseup = up; } function down(event) { obj.style.cursor = "move"; isDown = true; ObjLeft = obj.offsetLeft; ObjTop = obj.offsetTop; posX = parseInt(mousePosition(event).x); posY = parseInt(mousePosition(event).y); } function move(event) { if (isDown == true) { var x = parseInt(mousePosition(event).x - posX + ObjLeft); var y = parseInt(mousePosition(event).y - posY + ObjTop); var w = document.documentElement.clientWidth - obj.offsetWidth; var h = document.documentElement.clientHeight - obj.offsetHeight; console.log(x + ',' + y); if (x < 0) { x = 0 } else if (x > w) { x = w }; if (y < 0) { y = 0 }else if (y > h) { y= h }; obj.style.left = x + 'px'; obj.style.top = y + 'px'; } } function up() { isDown = false; } function mousePosition(evt) { var xPos, yPos; evt = evt || window.event; if (evt.pageX) { xPos = evt.pageX; yPos = evt.pageY; } else { xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft; yPos = evt.clientY + document.body.scrollTop - document.body.clientTop; } return { x: xPos, y: yPos } } </script> </head> <body> <div id="box" class="box"></div> </body> </html>
代碼二:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>JS拖拽</title> <style> *{padding: 0; margin: 0; } .box{width: 100px;height: 100px;background: blue;position: absolute; } </style> <script> var isDown = false; var ObjLeft, ObjTop, posX, posY, obj,offsetX,offsetY; window.onload = function() { obj = document.getElementById('box'); obj.onmousedown = down; document.onmousemove = move; document.onmouseup = up; } function down(event) { obj.style.cursor = "move"; isDown = true; ObjLeft = obj.offsetLeft; ObjTop = obj.offsetTop; posX = parseInt(mousePosition(event).x); posY = parseInt(mousePosition(event).y); offsetX=posX-ObjLeft; offsetY=posY-ObjTop; } function move(event) { if (isDown == true) { var x=mousePosition(event).x-offsetX var y=mousePosition(event).y-offsetY var w = document.documentElement.clientWidth - obj.offsetWidth; var h = document.documentElement.clientHeight - obj.offsetHeight; console.log(x + ',' + y); x=Math.min(w,Math.max(0,x)); y=Math.min(h,Math.max(0,y)); obj.style.left = x + 'px'; obj.style.top = y + 'px'; } } function up() { isDown = false; } function mousePosition(evt) { var xPos, yPos; evt = evt || window.event; if (evt.pageX) { xPos = evt.pageX; yPos = evt.pageY; } else { xPos = evt.clientX + document.body.scrollLeft - document.body.clientLeft; yPos = evt.clientY + document.body.scrollTop - document.body.clientTop; } return { x: xPos, y: yPos } } </script> </head> <body> <div id="box" class="box"></div> </body> </html>
代碼一對(duì)應(yīng)原理一,代碼二對(duì)應(yīng)原理二,效果都是一樣的,只不過(guò)原理二是在原理一的基礎(chǔ)上演變過(guò)來(lái)的,演變之后,元素拖動(dòng)的邊緣處理也相應(yīng)的做了變化。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- javascript彈出拖動(dòng)窗口
- JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
- javascript實(shí)現(xiàn)可拖動(dòng)變色并關(guān)閉層窗口實(shí)例
- JavaScript模擬可展開(kāi)、拖動(dòng)與關(guān)閉的聊天窗口實(shí)例
- javascript實(shí)現(xiàn)漂亮的拖動(dòng)層,窗口拖拽特效
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- javascript div 彈出可拖動(dòng)窗口
- jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
- Jquery仿IGoogle實(shí)現(xiàn)可拖動(dòng)窗口示例代碼
- 基于JavaScript實(shí)現(xiàn)窗口拖動(dòng)效果
相關(guān)文章
JavaScript隱式類型轉(zhuǎn)換代碼實(shí)例
這篇文章主要介紹了JavaScript隱式類型轉(zhuǎn)換代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05JavaScript在IE中“意外地調(diào)用了方法或?qū)傩栽L問(wèn)”
FF是正常的,IE報(bào)“意外地調(diào)用了方法或?qū)傩栽L問(wèn)”。2008-11-11Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例
今天小編就為大家分享一篇Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09原生JS實(shí)現(xiàn)的雪花飄落動(dòng)畫(huà)效果
這篇文章主要介紹了原生JS實(shí)現(xiàn)的雪花飄落動(dòng)畫(huà)效果,涉及javascript數(shù)值運(yùn)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05微信小程序?qū)崿F(xiàn)手機(jī)號(hào)碼驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手機(jī)號(hào)碼驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07IE中radio 或checkbox的checked屬性初始狀態(tài)下不能選中顯示問(wèn)題
checked屬性在IE下不能正確實(shí)現(xiàn)的問(wèn)題2009-07-07