<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可拖拽弹窗</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.outerBox {
position: fixed;
width: 100%;
height: 100%;
background: #bbb;
}
#middleBox {
padding: 0 30px;
position: absolute;
background: #ddd;
margin: auto;
cursor: pointer;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
user-select: none;
}
p {
line-height: 40px;
}
</style>
</head>
<body class="outerBox">
<div id="middleBox">
<div>
<p> 本弹窗特征: </p>
<p> 1、内容区可拖拽 </p>
<p> 2、内容区可以是任意高度、宽度 </p>
<p> 3、初始位置居中,由下面css决定 </p>
<div style="padding-left:30px;">
<p> left: 50%; </p>
<p> top: 50%;</p>
<p> transform: translate(-50%, -50%);</p>
</div>
<p> 4、关闭弹窗之前,用上面css代码重置弹窗的位置,否则,下次使用弹窗时,弹窗将出现在上次关闭时的地方。 </p>
<p> 5、弹窗向任何方向(上下左右)拖拽,当消失3/4时,停止移动。 </p>
</div>
</div>
</body>
</html>
<script>
var oDiv = document.getElementById('middleBox');
oDiv.onmousedown = down;
function processThis(fn, currentThis) {
return function (event) {
fn.call(currentThis, event)//”先触发,后执行“与”先执行,后触发“
}
}
function down(event) {
event = event || window.event;
this.initOffsetLeft = this.offsetLeft;
this.initOffsetTop = this.offsetTop;
this.initClientX = event.clientX;
this.initClientY = event.clientY;
this.maxOffsetWidth = (document.documentElement.clientWidth || document.body.clientWidth) - this.offsetWidth;
this.maxOffsetHeight = (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight;
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(event) {
var currentLeft = this.initOffsetLeft + (event.clientX - this.initClientX);
var currentTop = this.initOffsetTop + (event.clientY - this.initClientY);
//以下都是边界值的判断;弹窗向任何方向(上下左右)拖拽,当消失3/4时,停止移动。
if (currentLeft > this.maxOffsetWidth + this.clientWidth / 0.8) {
currentLeft = this.maxOffsetWidth + this.clientWidth / 0.8;
} else if (currentLeft < -this.clientWidth / 4) {
currentLeft = -this.clientWidth / 4;
}
if (currentTop > this.maxOffsetHeight + this.clientHeight / 0.8) {
currentTop = this.maxOffsetHeight + this.clientHeight / 0.8;
} else if (currentTop < -this.clientHeight / 4) {
currentTop = -this.clientHeight / 4;
}
//以上都是边界值的判断;弹窗向任何方向(上下左右)拖拽,当消失3/4时,停止移动。
//以下都是边界值的判断;弹窗向任何方向(上下左右)拖拽,当消失1/2时,停止移动。
/* if (currentLeft > this.maxOffsetWidth + this.clientWidth) {
currentLeft = this.maxOffsetWidth + this.clientWidth;
} else if (currentLeft < -this.clientWidth / 64) {
currentLeft = -this.clientWidth / 64;
}
if (currentTop > this.maxOffsetHeight + this.clientHeight) {
currentTop = this.maxOffsetHeight + this.clientHeight;
} else if (currentTop < -this.clientHeight / 64) {
currentTop = -this.clientHeight / 64;
} */
//以上都是边界值的判断;弹窗向任何方向(上下左右)拖拽,当消失1/2时,停止移动。
//以下都是边界值的判断;弹窗向任何方向(上下左右)拖拽,触边时,停止移动。
/* if (currentLeft > this.maxOffsetWidth + this.clientWidth / 2) {
currentLeft = this.maxOffsetWidth + this.clientWidth / 2;
} else if (currentLeft < this.clientWidth / 2) {
currentLeft = this.clientWidth / 2;
}
if (currentTop > this.maxOffsetHeight + this.clientHeight / 2) {
currentTop = this.maxOffsetHeight + this.clientHeight / 2;
} else if (currentTop < this.clientHeight / 2) {
currentTop = this.clientHeight / 2;
} */
//以上都是边界值的判断;弹窗向任何方向(上下左右)拖拽,触边时,停止移动。
this.style.left = currentLeft + 'px';
this.style.top = currentTop + 'px';
console.log(this.style.left);
console.log(this.style.top);
}
function up() {
if (this.releaseCapture) {
this.releaseCapture();
this.onmousemove = null;
this.onmouseup = null;
} else {
document.onmousemove = null;
document.onmouseup = null;
}
}
</script>