JS實(shí)現(xiàn)簡(jiǎn)單可拖動(dòng)的模態(tài)框
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單可拖動(dòng)的模態(tài)框的具體代碼,供大家參考,具體內(nèi)容如下
這篇博文有 簡(jiǎn)單實(shí)現(xiàn) 和 帶樣式且稍微復(fù)雜一點(diǎn) 的兩個(gè)版本
簡(jiǎn)單版本
效果圖:
實(shí)現(xiàn)思路:
給可拖動(dòng)部分添加點(diǎn)擊事件,觸發(fā)時(shí)計(jì)算鼠標(biāo)在可拖動(dòng)部分中的坐標(biāo)( e.pageX - box.offsetLeft ),得到 x y 。
給 document 添加鼠標(biāo)移動(dòng)事件,因?yàn)楫?dāng)鼠標(biāo)拖動(dòng)模態(tài)框的時(shí)候,是在整個(gè)DOM窗口內(nèi)移動(dòng)的。保持鼠標(biāo)與模態(tài)框的相對(duì)位置不變,所以需要計(jì)算此時(shí)的模態(tài)框的位置(e.pageX - x ),進(jìn)而修改模態(tài)框位置。此時(shí)的 e.pageX 已經(jīng)發(fā)生變化,跟上述的 e.pageX 是不相等的。
當(dāng)鼠標(biāo)彈起時(shí),清除移動(dòng)事件即可。
代碼注意點(diǎn):
1 offsetWidth 這類(lèi)offset屬性是只讀屬性,不能通過(guò)對(duì)其進(jìn)行賦值來(lái)修改元素。
2 使用 style.top、style.left 的元素必須有定位,且在給這兩個(gè)屬性賦值的時(shí)候必須要在末尾加上單位 'px' 。
3 代碼中 mousemove 事件回調(diào)函數(shù)的參數(shù) e 不能省略,如果省略則會(huì)使用外部的 e,即 mousedown 事件回調(diào)函數(shù)中的 e,因此得到的鼠標(biāo)坐標(biāo)是錯(cuò)誤的。
代碼:
<!DOCTYPE html> <html lang="en"> ? <head> ? ? <meta charset="UTF-8"> ? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ? ? <title>Document</title> ? ? <!-- 使用style修改樣式 --> ? ? <style> ? ? ? ? .box { ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? height: 200px; ? ? ? ? ? ? width: 200px; ? ? ? ? ? ? background-color: plum; ? ? ? ? } ? ? ? ? ? .title { ? ? ? ? ? ? width: 100%; ? ? ? ? ? ? height: 50px; ? ? ? ? ? ? background-color: rosybrown; ? ? ? ? ? ? cursor: move; ? ? ? ? ? ? /* 讓文字不可選中 */ ? ? ? ? ? ? -webkit-user-select: none; ? ? ? ? ? ? -moz-user-select: none; ? ? ? ? ? ? -ms-user-select: none; ? ? ? ? ? ? user-select: none; ? ? ? ? } ? ? </style> </head> ? <body> ? ? <div class="box"> ? ? ? ? <div class="title">head部分</div> ? ? </div> ? ? <script> ? ? ? ? var box = document.querySelector('.box'); ? ? ? ? var title = document.querySelector('.title'); ? ? ? ? title.addEventListener('mousedown', function (e) { ? ? ? ? ? ? //獲取鼠標(biāo)在box內(nèi)的坐標(biāo)值 ? ? ? ? ? ? var x = e.pageX - box.offsetLeft; ? ? ? ? ? ? var y = e.pageY - box.offsetTop; ? ? ? ? ? ? document.addEventListener('mousemove', move); ? ? ? ? ? ? ? function move(e) { ? ? ? ? ? ? ? ? box.style.left = e.pageX - x + 'px'; ? ? ? ? ? ? ? ? box.style.top = e.pageY - y + 'px'; ? ? ? ? ? ? } ? ? ? ? ? ? document.addEventListener('mouseup', function () { ? ? ? ? ? ? ? ? document.removeEventListener('mousemove', move); ? ? ? ? ? ? }) ? ? ? ? }) ? ? </script> </body> ? </html>
復(fù)雜版本
效果圖:
實(shí)現(xiàn)思路:
跟簡(jiǎn)單版本大體相同
實(shí)現(xiàn)代碼:
<!DOCTYPE html> <html> ? <head lang="en"> ? ? <meta charset="UTF-8"> ? ? <title>拖動(dòng)模態(tài)框</title> ? ? <style> ? ? ? ? .login-header { ? ? ? ? ? ? width: 100%; ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? height: 30px; ? ? ? ? ? ? font-size: 24px; ? ? ? ? ? ? line-height: 30px; ? ? ? ? } ? ? ? ? ? ul, ? ? ? ? li, ? ? ? ? ol, ? ? ? ? dl, ? ? ? ? dt, ? ? ? ? dd, ? ? ? ? div, ? ? ? ? p, ? ? ? ? span, ? ? ? ? h1, ? ? ? ? h2, ? ? ? ? h3, ? ? ? ? h4, ? ? ? ? h5, ? ? ? ? h6, ? ? ? ? a { ? ? ? ? ? ? padding: 0px; ? ? ? ? ? ? margin: 0px; ? ? ? ? } ? ? ? ? ? .login { ? ? ? ? ? ? display: none; ? ? ? ? ? ? width: 512px; ? ? ? ? ? ? height: 280px; ? ? ? ? ? ? position: fixed; ? ? ? ? ? ? border: #ebebeb solid 1px; ? ? ? ? ? ? left: 50%; ? ? ? ? ? ? top: 50%; ? ? ? ? ? ? background: #ffffff; ? ? ? ? ? ? box-shadow: 0px 0px 20px #ddd; ? ? ? ? ? ? z-index: 9999; ? ? ? ? ? ? transform: translate(-50%, -50%); ? ? ? ? } ? ? ? ? ? .login-title { ? ? ? ? ? ? width: 100%; ? ? ? ? ? ? margin: 10px 0px 0px 0px; ? ? ? ? ? ? text-align: center; ? ? ? ? ? ? line-height: 40px; ? ? ? ? ? ? height: 40px; ? ? ? ? ? ? font-size: 18px; ? ? ? ? ? ? position: relative; ? ? ? ? ? ? cursor: move; ? ? ? ? } ? ? ? ? ? .login-input-content { ? ? ? ? ? ? margin-top: 20px; ? ? ? ? } ? ? ? ? ? .login-button { ? ? ? ? ? ? width: 50%; ? ? ? ? ? ? margin: 30px auto 0px auto; ? ? ? ? ? ? line-height: 40px; ? ? ? ? ? ? font-size: 14px; ? ? ? ? ? ? border: #ebebeb 1px solid; ? ? ? ? ? ? text-align: center; ? ? ? ? } ? ? ? ? ? .login-bg { ? ? ? ? ? ? display: none; ? ? ? ? ? ? width: 100%; ? ? ? ? ? ? height: 100%; ? ? ? ? ? ? position: fixed; ? ? ? ? ? ? top: 0px; ? ? ? ? ? ? left: 0px; ? ? ? ? ? ? background: rgba(0, 0, 0, .3); ? ? ? ? } ? ? ? ? ? a { ? ? ? ? ? ? text-decoration: none; ? ? ? ? ? ? color: #000000; ? ? ? ? } ? ? ? ? ? .login-button a { ? ? ? ? ? ? display: block; ? ? ? ? } ? ? ? ? ? .login-input input.list-input { ? ? ? ? ? ? float: left; ? ? ? ? ? ? line-height: 35px; ? ? ? ? ? ? height: 35px; ? ? ? ? ? ? width: 350px; ? ? ? ? ? ? border: #ebebeb 1px solid; ? ? ? ? ? ? text-indent: 5px; ? ? ? ? } ? ? ? ? ? .login-input { ? ? ? ? ? ? overflow: hidden; ? ? ? ? ? ? margin: 0px 0px 20px 0px; ? ? ? ? } ? ? ? ? ? .login-input label { ? ? ? ? ? ? float: left; ? ? ? ? ? ? width: 90px; ? ? ? ? ? ? padding-right: 10px; ? ? ? ? ? ? text-align: right; ? ? ? ? ? ? line-height: 35px; ? ? ? ? ? ? height: 35px; ? ? ? ? ? ? font-size: 14px; ? ? ? ? } ? ? ? ? ? .login-title span { ? ? ? ? ? ? position: absolute; ? ? ? ? ? ? font-size: 12px; ? ? ? ? ? ? right: -20px; ? ? ? ? ? ? top: -30px; ? ? ? ? ? ? background: #ffffff; ? ? ? ? ? ? border: #ebebeb solid 1px; ? ? ? ? ? ? width: 40px; ? ? ? ? ? ? height: 40px; ? ? ? ? ? ? border-radius: 20px; ? ? ? ? } ? ? </style> </head> ? <body> ? ? <div class="login-header"><a id="link" href="javascript:;">點(diǎn)擊,彈出登錄框</a></div> ? ? <div id="login" class="login"> ? ? ? ? <div id="title" class="login-title">登錄會(huì)員 ? ? ? ? ? ? <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關(guān)閉</a></span> ? ? ? ? </div> ? ? ? ? <div class="login-input-content"> ? ? ? ? ? ? <div class="login-input"> ? ? ? ? ? ? ? ? <label>用戶名:</label> ? ? ? ? ? ? ? ? <input type="text" placeholder="請(qǐng)輸入用戶名" name="info[username]" id="username" class="list-input"> ? ? ? ? ? ? </div> ? ? ? ? ? ? <div class="login-input"> ? ? ? ? ? ? ? ? <label>登錄密碼:</label> ? ? ? ? ? ? ? ? <input type="password" placeholder="請(qǐng)輸入登錄密碼" name="info[password]" id="password" class="list-input"> ? ? ? ? ? ? </div> ? ? ? ? </div> ? ? ? ? <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會(huì)員</a></div> ? ? </div> ? ? <!-- 遮蓋層 --> ? ? <div id="bg" class="login-bg"></div> ? ? <script> ? ? ? ? // 1. 獲取元素 ? ? ? ? var login = document.querySelector('.login'); ? ? ? ? var mask = document.querySelector('.login-bg'); ? ? ? ? var link = document.querySelector('#link'); ? ? ? ? var closeBtn = document.querySelector('#closeBtn'); ? ? ? ? var title = document.querySelector('#title'); ? ? ? ? // 2. 點(diǎn)擊彈出層這個(gè)鏈接 link ?讓mask 和login 顯示出來(lái) ? ? ? ? link.addEventListener('click', function () { ? ? ? ? ? ? mask.style.display = 'block'; ? ? ? ? ? ? login.style.display = 'block'; ? ? ? ? }) ? ? ? ? // 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login? ? ? ? ? closeBtn.addEventListener('click', function () { ? ? ? ? ? ? mask.style.display = 'none'; ? ? ? ? ? ? login.style.display = 'none'; ? ? ? ? }) ? ? ? ? // 4. 開(kāi)始拖拽 ? ? ? ? // (1) 當(dāng)我們鼠標(biāo)按下, 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo) ? ? ? ? title.addEventListener('mousedown', function (e) { ? ? ? ? ? ? var x = e.pageX - login.offsetLeft; ? ? ? ? ? ? var y = e.pageY - login.offsetTop; ? ? ? ? ? ? // (2) 鼠標(biāo)移動(dòng)的時(shí)候,把鼠標(biāo)在頁(yè)面中的坐標(biāo),減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值 ? ? ? ? ? ? document.addEventListener('mousemove', move) ? ? ? ? ? ? ? function move(e) { ? ? ? ? ? ? ? ? login.style.left = e.pageX - x + 'px'; ? ? ? ? ? ? ? ? login.style.top = e.pageY - y + 'px'; ? ? ? ? ? ? } ? ? ? ? ? ? // (3) 鼠標(biāo)彈起,就讓鼠標(biāo)移動(dòng)事件移除 ? ? ? ? ? ? document.addEventListener('mouseup', function () { ? ? ? ? ? ? ? ? document.removeEventListener('mousemove', move); ? ? ? ? ? ? }) ? ? ? ? }) ? ? </script> </body> ? </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JS實(shí)現(xiàn)模態(tài)框拖拽動(dòng)態(tài)效果
- JavaScript實(shí)現(xiàn)拖動(dòng)模態(tài)框
- JS實(shí)現(xiàn)簡(jiǎn)單拖動(dòng)模態(tài)框案例
- HTML+CSS+JavaScript實(shí)現(xiàn)可拖拽模態(tài)框
- js實(shí)現(xiàn)拖動(dòng)模態(tài)框效果
- JS實(shí)現(xiàn)拖動(dòng)模態(tài)框案例
- js實(shí)現(xiàn)模態(tài)框的拖拽效果
- js實(shí)現(xiàn)拖動(dòng)模態(tài)框
- JavaScript實(shí)現(xiàn)模態(tài)框拖拽效果
- js實(shí)現(xiàn)模態(tài)框拖拽
相關(guān)文章
js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)網(wǎng)站背景鼠標(biāo)吸附線條動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JavaScript取得gridview中獲取checkbox選中的值
這篇文章主要介紹了 js取得gridview中獲取checkbox選中的值,本文給大家分享兩段代碼片段,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-07-07JS 修改URL參數(shù)(實(shí)現(xiàn)代碼)
本篇文章是對(duì)JS修改URL參數(shù)的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-07-07js仿百度登錄頁(yè)實(shí)現(xiàn)拖動(dòng)窗口效果
這篇文章主要為大家詳細(xì)介紹了js仿百度登錄頁(yè)實(shí)現(xiàn)拖動(dòng)窗口效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03微信小程序開(kāi)發(fā)WXML模板語(yǔ)法基礎(chǔ)教程
這篇文章主要介紹了微信小程序模板語(yǔ)法,WXML(WeiXin?Markup?Language)是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言,結(jié)合基礎(chǔ)組件、事件系統(tǒng),可以構(gòu)建出頁(yè)面的結(jié)構(gòu),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08window.ActiveXObject使用說(shuō)明
判斷瀏覽器是否支持ActiveX控件,如果瀏覽器支持ActiveX控件可以利用2010-11-11JavaScript實(shí)現(xiàn)翻轉(zhuǎn)圖片的三種方法小結(jié)
有時(shí),我們可能需要翻轉(zhuǎn)Web應(yīng)用中的媒體元素,所以這篇文章小編為大家詳細(xì)介紹了三種使用JavaScript翻轉(zhuǎn)圖片的方法,希望對(duì)大家有所幫助2024-01-01javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)鼠標(biāo)拖尾特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09