js拖拽功能實(shí)現(xiàn)代碼解析
本文解決的問題:
1、怎樣在網(wǎng)頁(yè)中實(shí)現(xiàn)拖曳功能;
2、document.documentElement與document.body的區(qū)別。
document.documentElement.clientWidth指整個(gè)html文檔的寬度,document.body.clientWidth的寬度。這兩者是不一樣的??梢栽赾onsole控制臺(tái)通過console.log(document.documentElement)和console.log(document.body)進(jìn)行測(cè)試。
3、getBoundingClientRect().left與offsetLeft的區(qū)別。
getBoundingClientRect()用于獲取元素的left、top、right、bottom。offset獲取相對(duì)于父級(jí)的left和top。getBoundingClientRect()獲取相對(duì)于窗口的left、top、right、bottom。
4、e.clientX指的是鼠標(biāo)點(diǎn)相對(duì)于窗口的坐標(biāo)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>彈窗</title> <style type="text/css"> #mask { position: fixed; left:0; top:0; width:100%; height: 100%; background-color: hsla(250,100%,50%,0.6); display: none; } #popBox { position: absolute; background-color: #fff; width:200px; height: 200px; /*left:50%; top:50%;*/ /*margin-top: -100px; margin-left: -100px;*/ } </style> </head> <body> <button id="clickBtn">點(diǎn)擊</button> <div id="mask"> <div id="popBox"></div> </div> <script type="text/javascript"> var clickBtn = document.getElementById("clickBtn"); var popBox = document.getElementById("popBox") var mask = document.getElementById("mask"); clickBtn.onclick = function() { mask.style.display = "block"; popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px"; popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px"; } popBox.onclick = function(e) { var e = e || window.event;//e指所有代碼的集合,通過它可以獲取事件的各種屬性。 e.cancelBubble = true;//阻止事件冒泡,即點(diǎn)擊事件不會(huì)傳遞到mask這一層,意味著不會(huì)觸發(fā)點(diǎn)擊mask事件代碼。 } mask.onclick = function() { mask.style.display = "none"; } //拖拽 mousedown->mousemove->mouseup popBox.onmousedown = function(e) { var e = e || window.event; var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于獲取元素的left、top、right、bottom。offset獲取相對(duì)于父級(jí)的left和top。getBoundingClientRect()獲取相對(duì)于窗口的left、top、right、bottom。 var oX = e.clientX - pos.left;//clientX指相對(duì)于窗口的坐標(biāo)。 var oY = e.clientY - pos.top; document.onmousemove = function(e) { var e = e || window.event; var oLeft = e.clientX - oX; var oTop = e.clientY - oY; popBox.style.left = oLeft + "px"; popBox.style.top = oTop + "px"; if (oLeft<0) { popBox.style.left = 0 + "px"; }; if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) { popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整個(gè)html文檔的寬度,document.body.clientWidth的寬度。這兩者是不一樣的??梢栽赾onsole控制臺(tái)通過console.log(document.documentElement)和console.log(document.body)進(jìn)行測(cè)試。 } if (oTop<0) { popBox.style.top = 0 + "px"; }; if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) { popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px"; } } popBox.onmouseup = function() { document.onmousemove = null; } } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)拖拽的方法分析
- JS基于面向?qū)ο髮?shí)現(xiàn)的拖拽功能示例
- 利用JavaScript實(shí)現(xiàn)拖拽改變?cè)卮笮?/a>
- 淺析JavaScript動(dòng)畫模擬拖拽原理
- 原生js實(shí)現(xiàn)彈出層登錄拖拽功能
- js實(shí)現(xiàn)小窗口拖拽效果
- 基于JavaScript實(shí)現(xiàn)右鍵菜單和拖拽功能
- Sortable.js拖拽排序使用方法解析
- js實(shí)現(xiàn)拖拽效果
- js完美的div拖拽實(shí)例代碼
- js 表格排序(編輯+拖拽+縮放)
- 鼠標(biāo)拖拽移動(dòng)子窗體的JS實(shí)現(xiàn)
- js實(shí)現(xiàn)的簡(jiǎn)練高效拖拽功能示例
相關(guān)文章
JavaScript如何實(shí)現(xiàn)圖片處理與合成
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)圖片處理與合成,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05JavaScript實(shí)現(xiàn)瀑布流布局詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流的實(shí)現(xiàn)方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-07-07JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能
這篇文章主要介紹了JavaScript 自定義html元素鼠標(biāo)右鍵菜單功能,本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12JavaScript使用function定義對(duì)象并調(diào)用的方法
這篇文章主要介紹了JavaScript使用function定義對(duì)象并調(diào)用的方法,實(shí)例分析了javascript中function定義及使用對(duì)象與方法的相關(guān)技巧,需要的朋友可以參考下2015-03-03大轉(zhuǎn)盤抽獎(jiǎng)小程序版 轉(zhuǎn)盤抽獎(jiǎng)網(wǎng)頁(yè)版
這篇文章主要為大家詳細(xì)介紹了大轉(zhuǎn)盤抽獎(jiǎng)小程序版和網(wǎng)頁(yè)版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01