今天小編給大家分享一下js如何實現模態框拖拽的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
效果展示
需求分析
點擊登錄后登錄表單和遮罩層顯示，點擊關閉按鈕隱藏。
輸入密碼時可以明文查看或者隱藏。
在表單的頭部按下鼠標后可以拖拽表單。
鼠標彈起拖拽結束。
代碼分析
HTML 代碼
<body> <a href="javascript:;" class="login">登錄我的賬號</a> <form action=""> <h5>賬號登錄</h5> <div class="login-items"> <label for="uname">用戶名：</label > <input type="text" placeholder="請輸入用戶名" id="uname"> </div> <div class="login-items"> <label for="psw">登錄密碼：</label> <input type="password" name="" id="psw" placeholder="請輸入您的密碼"> <span class="close" id="eye-state"></span> </div> <a href="javascript:;" class="login-btn">登錄賬號</a > <a href="javascript:;" class="close-btn">關閉</a > </form> <div id="bg" class="login-bg"></div> </body> <script src="js/模態框.js"></script>
js 代碼
var eyeState = document.querySelector('#eye-state');
var pswInput = document.querySelector('#psw');
var login = document.querySelector('.login');
var loginBg = document.querySelector('#bg');
var loginForm = document.querySelector('form');
var closeBtn = document.querySelector('.close-btn');
var eyeFlag = 0;
eyeState.onclick = setEye;
login.onclick = goLogin;
closeBtn.onclick = leaveLogin;
loginForm.children[0].addEventListener('mousedown', dragForm);
// 表單內容不可選，不然看著不舒服
loginForm.onselectstart = function(e) {
e.preventDefault();
}
// 1、實現小眼睛改變密碼輸入狀態
function setEye() {
if (!eyeFlag) {
eyeState.className = 'open';
pswInput.type = 'text';
eyeFlag = 1;
} else {
eyeState.className = 'close';
pswInput.type = 'password';
eyeFlag = 0;
}
}
// 2、外面登錄按鈕實現表單、遮罩層的顯示和它自己隱藏
function goLogin() {
loginBg.style.visibility = 'visible';
loginForm.style.display = 'block';
this.style.display = 'none';
}
// 3、關閉按鈕實現表單、遮罩層的隱藏和外面登錄按鈕的顯示
function leaveLogin() {
loginBg.style.visibility = 'hidden';
loginForm.style.display = 'none';
login.style.display = 'block';
}
// 4、實現表單拖拽效果
function dragForm(e) {
// 當鼠標在表單的標題按下時獲取它在表單元素內的坐標并綁定移動事件
var x = e.pageX - this.parentNode.offsetLeft;
var y = e.pageY - this.parentNode.offsetTop;
document.addEventListener('mousemove', move);
// 鼠標彈起移除移動事件
this.addEventListener('mouseup', function() {
document.removeEventListener('mousemove', move)
});
function move(event) {
loginForm.style.left = event.pageX - x + 'px';
loginForm.style.top = event.pageY - y + 'px';
}
}分析
密碼輸入框，在點擊后面的眼睛即 span 元素時通過 eyeFlag 變量來判斷設置表單的 type 屬性和 span 的類名（該用哪個小眼睛圖）。
鼠標是在表單標題區域按下后才有拖拽效果所以給標題綁定 mousedown 事件。
mousemove 和 mouseup 事件在鼠標按下后分別綁定給 document 和 this(標題)。
在實現拖拽時將 mousemove 事件綁定給標題的話會出現 bug ?？焖偻献r鼠標會離開標題導致表單沒有跟上。所以要將這個事件綁定給 document 。
表單跟隨鼠標的原理：在鼠標按下時根據鼠標和表單在頁面的坐標得到它在表單的坐標（拖拽過程這個位置是不變的）。在鼠標移動過程根據鼠標在頁面的動態坐標和它在表單的坐標即可獲得表單在頁面的動態坐標。
以上就是“js如何實現模態框拖拽”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
