该功能常见于滑动验证码
HTML部分
<div id="box">
<div id="title">按住拖动</div>
</div>
css部分
<style>
* {
padding: 0;
margin: 0;
}
#box {
width: 400px;
height: 300px;
background-color: orange;
position: absolute;
text-align: center;
color: #ffffff;
}
#title {
width: 100%;
height: 2em;
line-height: 2em;
background-color: #999999;
cursor: move;
}
</style>
JS部分
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0];
var title = document.getElementsByClassName('title')[0];
//0.声明一个开关变量
var off = 0;
//0.1声明一个变量一保存鼠标与盒子之间的距离
var cur = {};
//1.给标题添加鼠标按下事件
title.onmousedown = function(e){
off = 1;
//1.1 计算鼠标位置-盒子到页面的位置,得到一个差,永远不变
cur.x = e.clientX-box.offsetLeft;
cur.y = e.clientY-box.offsetTop;
}
//2.添加鼠标移动事件
document.onmousemove = function(e){
//2.1判断按下的开关状态 如果是真再运行
if(!off) return;
var left = e.clientX - cur.x;
var tops = e.clientY - cur.y;
//限制box不超出浏览器
left = left<0?0:left;
tops = tops<0?0:tops;
left = left >= window.innerWidth-400 ? window.innerWidth-400 : left;
tops = tops >= window.innerHeight-300 ? window.innerHeight-300 : tops;
box.style.left = left+'px';
box.style.top = tops+'px';
}
//3.添加鼠标抬起事件
title.onmouseup = title.onmouseout= function(){
console.log('鼠标抬起');
off = 0;
}
</script>