实现效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e57b49079b40044ac47381d223c4d503.gif#pic_center)
代码
HTML
<!-- 鼠标拖拽特效S -->
<h1>可拖拽特效</h1>
<div class="tz_nav">
<a href="javascript:;" id="register">注册信息</a>
</div>
<div class="tz_d_box" id="d_box">
<div class="hd" id="drop">
注册信息(可拖拽)
<span id="box_close">[关闭]</span>
</div>
<div class="bd"></div>
</div>
<!-- 鼠标拖拽特效E -->
CSS
/* 鼠标拖拽效果S */
.tz_d_box {
width: 400px;
height: 300px;
border: 5px solid #eee;
box-shadow: 2px 2px 2px 2px #666;
position: absolute;
}
.hd {
width: 100%;
height: 25px;
background-color: #7c9299;
border-bottom: 1px solid #31406e;
line-height: 25px;
color: white;
cursor: move;
}
/* 鼠标拖拽效果E */
js
// 鼠标拖拽特效S
var d_box = document.getElementById("d_box");
var drop = document.getElementById("drop");
// 鼠标在滚动条上按下 可以拖拽,鼠标移动盒子也动
drop.onmousedown = function (event) {
var event = event || window.event;
// 获取鼠标在页面的位置
var pageX = event.pageX || event.clientX + documentElement.scrolLeft;
var pageY = event.pageY || event.clientY + documentElement.scrolTop;
// 获取鼠标按下的一瞬间在盒子中的位置
var boxX = pageX - d_box.offsetLeft;
var boxY = pageY - d_box.offsetTop;
document.onmousemove = function (event) {
var event = event || window.event;
// 鼠标在页面的位置
var pageX = event.pageX || event.clientX + documentElement.scrolLeft;
var pageY = event.pageY || event.clientY + documentElement.scrolTop;
// 让个盒子跟着鼠标移动
d_box.style.left = pageX - boxX + "px";
d_box.style.top = pageY - boxY + "px";
};
};
// 鼠标移开,盒子不跟着
document.onmouseup = function () {
document.onmousemove = null
}
// 鼠标拖拽特效E