共计 3225 个字符，预计需要花费 9 分钟才能阅读完成。
复制代码，可间接运行查看成果，关键处已正文阐明，心愿对你有所帮忙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 可拖动弹窗 </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<style>
body {background: #f5f5f5; font-size: 14px; color: #333;}
.dialog_btn_wrap {padding: 100px; text-align: center;}
#mask {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; background: rgba(0,0,0,.4); display: none;
-moz-user-select: none; -webkit-user-select: none;}
#dialog {position: absolute; width: 250px; height: 200px; top: 0; left: 0; border-radius: 10px; z-index: 2; background: #fff; display: none;
-moz-user-select: none; -webkit-user-select: none;}
.dialog_head {text-align: center; line-height: 50px; background-color: #ddd; cursor: move;}
.dialog-body {height: 100px;}
.dialog-foot {height: 50px; text-align: center; line-height: 50px; background-color: #ddd;}
</style>
</head>
<body>
<div class="dialog_btn_wrap">
<a class="btn btn-lg btn-primary" id="dialog_btn"> 弹窗 </a>
</div>
<!-- 蒙层 -->
<div id="mask"></div>
<!-- 弹窗 -->
<div id="dialog">
<div class="dialog_head" id="move_part"> 可拖拽区域 </div>
<div class="dialog-body"></div>
<div class="dialog-foot">
<a class="btn btn-default" id="dialog_close"> 敞开 </a>
</div>
</div>
<script>
//g() 函数用于获取 dom 对象
function g(id) {return document.getElementById(id);
}
// 点击弹出弹窗
g('dialog_btn').onclick = function () {g('mask').style.display = 'block';
g('dialog').style.display = 'block';
autoCenter(g('dialog'));
}
// 点击敞开弹窗
g('dialog_close').onclick = function () {g('mask').style.display = 'none';
g('dialog').style.display = 'none';
}
// 弹窗主动居中
function autoCenter(el) {
// 获取窗口宽高
var windowW = document.documentElement.clientWidth;
var windowH = document.documentElement.clientHeight;
// 获取弹窗宽高
var elW = el.offsetWidth;
var elH = el.offsetHeight;
el.style.left = (windowW-elW)/2 + 'px';
el.style.top = (windowH-elH)/2 + 'px';
}
// 禁止选中弹窗内容
//document.attachEvent IE 浏览器监听事件，拖拽时禁止选中，firefox、chrome 通过 css -moz-user-select: none; -webkit-user-select: none; 设置
if(document.attachEvent) {g('dialog').attachEvent('onselectstart', function () {return false;})
}
// 扭转窗口大小，弹窗主动居中
window.onresize = function () {autoCenter(g('dialog'));
}
// 拖拽实现原理
//1. 鼠标点击时，设置弹窗可拖动，记录鼠标初试地位
//2. 鼠标拖动时，依据鼠标新地位更新弹窗地位
//3. 鼠标来到时，设置弹窗不可拖动
//4. 限度弹窗拖拽范畴
var mx = 0; // 鼠标 x,y 轴坐标 (绝对于 left top)
var my = 0;
var dx = 0; // 弹窗 x,y 轴坐标
var dy = 0;
var isDraging = false; // 弹窗不可拖动
// 鼠标点击
g('move_part').addEventListener('mousedown', function (e) {
var e = e || window.event; // 兼容写法，window.event 为 IE 浏览器独有对象
mx = e.pageX; // 点击时鼠标 X 坐标
my = e.pageY; // 点击时鼠标 Y 坐标
dx = g('dialog').offsetLeft; // 弹窗距页面左侧间隔
dy = g('dialog').offsetTop; // 弹窗距页面顶部间隔
isDraging = true; // 标记弹窗可拖动
})
// 鼠标拖动
// 当鼠标在以后对象上挪动时就产生了 onmousemove 事件
document.onmousemove = function (e) {
var e = e || window.event;
var x = e.pageX; // 挪动时鼠标 X 坐标
var y = e.pageY; // 挪动时鼠标 X 坐标
if(isDraging) {
var moveX = x - mx + dx; // 位移值 + 弹窗 left 值 = 挪动后弹窗 left 值
var moveY = y - my + dy; // 挪动后弹窗 top 值
// 限度弹窗拖拽范畴
// 页面宽高
var pageW = document.documentElement.clientWidth;
var pageH = document.documentElement.clientHeight;
// 弹窗宽高
var dialogW = g('dialog').offsetWidth;
var dialogH = g('dialog').offsetHeight;
var maxX = pageW - dialogW; // x 轴可拖动最大值
var maxY = pageH - dialogH; // x 轴可拖动最大值
//Math.min() Math.max() 妙用
moveX = Math.min(Math.max(0, moveX), maxX); // 设定 left 范畴, 0-maxX
moveY = Math.min(Math.max(0, moveY), maxY); // 设定 top 范畴, 0-maxY
// 从新设置弹窗地位
g('dialog').style.left = moveX + 'px';
g('dialog').style.top = moveY + 'px';
}
}
// 鼠标来到
g('move_part').addEventListener('mouseup', function () {isDraging = false;})
</script>
</body>
</html>
正文完
发表至： javascript
2021-02-26
