這篇文章主要介紹“原生JS怎么實現可拖拽登錄框”，在日常操作中，相信很多人在原生JS怎么實現可拖拽登錄框問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”原生JS怎么實現可拖拽登錄框”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
效果如下：
實現的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS實現可拖拽登錄框</title>
<style type="text/css">
body {
/* 背景圖 */
background: url(images/0.png) #fff top center no-repeat;
padding: 0px;
margin: 0px;
font-size: 12px;
font-family: "微軟雅黑";
}
.link {
text-align: right;
line-height: 20px;
padding-right: 40px;
}
.ui-dialog {
width: 380px;
height: auto;
display: none;
position: absolute;
z-index: 9000;
top: 0px;
left: 0px;
border: 1px solid #D5D5D5;
background: #fff;
}
.ui-dialog a {
text-decoration: none;
}
.ui-dialog-title {
height: 48px;
line-height: 48px;
padding: 0px 20px;
color: #535353;
font-size: 16px;
border-bottom: 1px solid #efefef;
background: #f5f5f5;
cursor: move;
user-select: none;
}
.ui-dialog-closebutton {
width: 16px;
height: 16px;
display: block;
position: absolute;
top: 12px;
right: 20px;
/* 關閉登錄框的圖標 */
background: url(images/1.png) no-repeat;
cursor: pointer;
}
.ui-dialog-closebutton:hover {
/* 關閉登錄框鼠標懸停時的圖標 */
background: url(images/2.png);
}
.ui-dialog-content {
padding: 15px 20px;
}
.ui-dialog-pt15 {
padding-top: 15px;
}
.ui-dialog-l40 {
height: 40px;
line-height: 40px;
text-align: right;
}
.ui-dialog-input {
width: 100%;
height: 40px;
margin: 0px;
padding: 0px;
border: 1px solid #d5d5d5;
font-size: 16px;
color: #c1c1c1;
text-indent: 25px;
outline: none;
}
.ui-dialog-input-username {
/* 輸入用戶名的圖標 */
background: url(images/4.png) no-repeat 2px;
}
.ui-dialog-input-password {
/* 輸入密碼的圖標 */
background: url(images/3.png) no-repeat 2px;
}
.ui-dialog-submit {
width: 100%;
height: 50px;
background: #3b7ae3;
border: none;
font-size: 16px;
color: #fff;
outline: none;
text-decoration: none;
display: block;
text-align: center;
line-height: 50px;
}
.ui-dialog-submit:hover {
background: #3f81b0;
}
.ui-mask {
width: 100%;
height: 100%;
background: #000;
position: absolute;
top: 0px;
height: 0px;
z-index: 8000;
opacity: 0.4;
/*兼容低版本的ie*/
filter: Alpha(opacity=40);
}
</style>
</head>
<body>
<div class="link">
<a href="javascript:showDialog();" >登錄</a>
</div>
<!-- 設置一個背景遮罩層,防止鼠標選中事件 -->
<div class="ui-mask" id="mask" onselectstart="return false"></div>
<div class="ui-dialog" id="dialogMove" onselectstart='return false;'>
<div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;">
登錄通行證
<a class="ui-dialog-closebutton" href="javascript:hideDialog();" ></a>
</div>
<div class="ui-dialog-content">
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-username" type="input" value="手機/郵箱/用戶名" />
</div>
<div class="ui-dialog-l40 ui-dialog-pt15">
<input class="ui-dialog-input ui-dialog-input-password" type="input" value="密碼" />
</div>
<div class="ui-dialog-l40">
<a href="#" >忘記密碼</a>
</div>
<div>
<a class="ui-dialog-submit" href="#" >登錄</a>
</div>
<div class="ui-dialog-l40">
<a href="#" >立即注冊</a>
</div>
</div>
</div>
<script type="text/javascript">
//聲明獲取元素對象方法
function $(id) { return document.getElementById(id); }
//聲明自動居中元素方法（el = Element）
function autoCenter(el) {
//獲得網頁可視區域的寬和高
var bodyW = document.documentElement.clientWidth;
var bodyH = document.documentElement.clientHeight;
//獲得傳入元素的實際寬和高
var elW = el.offsetWidth;
var elH = el.offsetHeight;
//設置元素的left為可視區域的寬度減去自身寬度的值除以2,top同理
el.style.left = (bodyW - elW) / 2 + 'px';
el.style.top = (bodyH - elH) / 2 + 'px';
}
//自動擴展元素到全部顯示區域
function fillToBody(el) {
//設置當前元素的寬度和高度為可視區域的寬和高
el.style.width = document.documentElement.clientWidth + 'px';
el.style.height = document.documentElement.clientHeight + 'px';
}
//設定鼠標在X和Y方向的初始值為0
var mouseOffsetX = 0;
var mouseOffsetY = 0;
//是否可拖拽的標記
var isDraging = false;
//鼠標事件1——計算鼠標相對拖拽元素的左上角的坐標，并且標記元素為可扡動
$('dialogDrag').addEventListener('mousedown', function (e) {
//兼容IE鼠標事件機制
var e = e || window.event;
//鼠標的偏移等于當前事件鼠標按下去的時候X 的坐標減去登錄浮層相對于頁面左邊的位置
mouseOffsetX = e.pageX - $('dialogMove').offsetLeft;
//鼠標的偏移等于當前事件鼠標按下去的時候Y的坐標減去登錄浮層相對于頁面頂邊的位置
mouseOffsetY = e.pageY - $('dialogMove').offsetTop;
//設置可拖動標記為true;
isDraging = true;
})
//鼠標事件2——鼠標移動時，檢測元素是否標記為可移動，
//如果是，則更新元素的位置，到當前鼠標的位置(要減去第一步中獲得的偏移)
document.onmousemove = function (e) {
//兼容IE鼠標事件機制
var e = e || window.event;
//獲取鼠標當前頁面(網頁左上角)的位置,e.pageX與e.pageY與鼠標按下時值不同
var mouseX = e.pageX;
var mouseY = e.pageY;
//記錄鼠標移動事件發生時的x坐標和y坐標
var moveX = 0;
var moveY = 0;
//如果當前可以拖動
if (isDraging === true) {
//拖動元素的位置等于鼠標相對于頁面位置減去鼠標相對于拖動元素左上角的位置
moveX = mouseX - mouseOffsetX;
moveY = mouseY - mouseOffsetY;
//獲取頁面最大寬度和最大高度(注意clientWidth和offsetWidth的區別)
var pageWidth = document.documentElement.clientWidth;
var pageHeight = document.documentElement.clientHeight;
//浮層對象的寬度和高度
var dialogWidth = $('dialogMove').offsetWidth;
var dialogHeight = $('dialogMove').offsetHeight;
//計算可拖動的最大值
var maxX = pageWidth - dialogWidth;
var maxY = pageHeight - dialogHeight;
//做判斷，防止拖拽出允許范圍
moveX = Math.min(maxX, Math.max(0, moveX));
moveY = Math.min(maxY, Math.max(0, moveY));
//設置拖動元素的新值
$('dialogMove').style.left = moveX + 'px';
$('dialogMove').style.top = moveY + 'px';
}
}
//鼠標事件3——鼠標松開的時候，標記元素為不可扡動
document.onmouseup = function () {
isDraging = false;
}
//展現登錄框
function showDialog() {
$('dialogMove').style.display = 'block';
$('mask').style.display = 'block';
//登錄框居中顯示
autoCenter($('dialogMove'));
//設置遮罩層充滿顯示區域
fillToBody($('mask'))
}
//隱藏登錄框
function hideDialog() {
$('dialogMove').style.display = 'none';
$('mask').style.display = 'none';
}
//當改變窗口大小時的處理函數
window.onresize = function () {
//登錄框居中顯示
autoCenter($('dialogMove'));
//如果登錄框顯示就執行遮罩層顯示函數
if ($('dialogMove').style.display === 'block') {
fillToBody($('mask'))
}
}
</script>
</body>
</html>到此，關于“原生JS怎么實現可拖拽登錄框”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
