拖动弹出框
Posted 寻觅聪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了拖动弹出框相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖动弹出框</title>
<style>
.top_box{
font-weight:bold;">#6796cc;
height:30px;
line-height: 30px;
color: #fff;
padding-left: 20px;
}
.b_box{
width: 300px;
height:300px;
box-shadow: 2px 1px 4px #000;
}
.drag{
width: 100%;
height: 30px;
line-height: 30px;
font-weight:bold;">#06b8cc;
color: #fff;
cursor: move;
}
.b_box{
display: none;
position:absolute;
margin: 100px;
}
a{
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<div class="top_box"><a href="javascript:;" id="register">注册信息</a> </div>
<div class="b_box" id="b_box">
<div class="drag" id="drag"> 注册信息（可以拖拽）
<span>关闭</span>
</div>
</div>
</body>
<script>
var register = document.getElementById("register");
var b_box = document.getElementById("b_box");
register.onclick = function(){
b_box.style.display = "block"
}
//鼠标按下移动时，先计算出b_box起始位置到屏幕的距离
var drag = document.getElementById("drag");
drag.onmousedown = function(event){
var event = event || window.event;
var x = event.clientX - b_box.offsetLeft + 100;
var y = event.clientY - b_box.offsetTop +100 ;
document.onmousemove = function(event){
var event = event || window.event;
b_box.style.left = event.clientX - x +"px";
b_box.style.top = event.clientY - y +"px";
// 防止拖动过程中选择文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
//鼠标弹起之后 结束操作
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</html>
以上是关于拖动弹出框的主要内容，如果未能解决你的问题，请参考以下文章