标签：process sed head doctype eth title lang func class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.outerBox {
width: 100%;
height: 100%;
background: #bbb;
}
#middleBox {
position: absolute;
background: #ddd;
margin: auto;
cursor: pointer;
width: 300px;
height: 300px;
left: calc(50% - 150px);
top: calc(50% - 150px);
user-select: none;
text-align: center;
}
p {
line-height: 70px;
}
</style>
</head>
<body class="outerBox">
<div id="middleBox">
<div>
<p> 可移动弹窗 </p>
<p> 可移动弹窗 </p>
</div>
<div>
<p> 可移动弹窗 </p>
<p> 可移动弹窗 </p>
</div>
</div>
</body>
</html>
<script>
var oDiv = document.getElementById(‘middleBox‘);
oDiv.onmousedown = down;
function processThis(fn, obj) {
return function (e) {
fn.call(obj, e)
}
}
function down(e) {
e = e || window.event;
this.currentoffsetLeft = this.offsetLeft;
this.currentoffsetTop = this.offsetTop;
this.currentclientX = e.clientX;
this.currentclientY = e.clientY;
if (this.setCapture) {
this.setCapture();
this.onmousemove = processThis(move, this);
this.onmouseup = processThis(up, this);
} else {
document.onmousemove = processThis(move, this);
document.onmouseup = processThis(up, this);
}
}
function move(e) {
var currentLeft = this.currentoffsetLeft + (e.clientX - this.currentclientX);
var currentTop = this.currentoffsetTop + (e.clientY - this.currentclientY);
//以下都是边界值的判断；
var maxBodyWidth = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth;
var maxBodyTop = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
if (currentLeft > maxBodyWidth) {
currentLeft = maxBodyWidth;
} else if (currentLeft < 0) {
currentLeft = 0;
}
if (currentTop > maxBodyTop) {
currentTop = maxBodyTop;
} else if (currentTop < 0) {
currentTop = 0;
}
this.style.left = currentLeft + ‘px‘;
this.style.top = currentTop + ‘px‘;
}
function up() {
if (this.releaseCapture) {
this.releaseCapture();
this.onmousemove = null;
this.onmouseup = null;
} else {
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>
标签：process sed head doctype eth title lang func class
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/11028953.html
