鼠标拖拽
本案例的目的是使用JavaScript实现简单的鼠标拖拽元素。
直接附上全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: #FFD700;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<div id="box">box</div>
<script type="text/javascript">
var box = document.querySelector('#box');
box.addEventListener('mousedown',function (e) {
//兼容写法：
e = e || window.event
//获取鼠标的位置
var disx = e.offsetX
var disy = e.offsetY
function fn(e) {
e = e || window.event
var left = e.clientX - disx
var top = e.clientY - disy
//限定盒子最大移动范围：
var max_left = document.body.offsetWidth - box.offsetWidth
var max_top = window.innerHeight - box.offsetHeight
//限定边界：
left = left <= 0 ? 0 : left; //左边界
left = left >= max_left ? max_left : left; //右边界
top = top <= 0 ? 0 : top; //上边界
top = top >= max_top ? max_top : top; //下边界
//盒子在页面中的运动位置
box.style.left = left + 'px';
box.style.top = top + 'px';
}
//给盒子添加鼠标移动事件，但是需要加在document上面，如果加在box上面会造成鼠标移动太快，而超出box边界，导致box跟不上
document.addEventListener('mousemove',fn)
//鼠标抬起的时候盒子不应该在跟着鼠标移动，因此需要移除鼠标移动事件
document.addEventListener('mouseup',function (){
document.removeEventListener('mousemove',fn) //移除鼠标移动事件
})
//清除默认行为，当盒子当中有内容的时候，如果双击盒子，会默认选中盒子中的内容，此时移动盒子移动的是盒子的内容，而无法移动盒子
if (e.preventDefault){
e.preventDefault()
}else{
return false;
}
})
</script>
</body>
</html>
需要注意的点：
在获取最大高度max_top的时候不能使用document.body.offsetTop来获取，而应该使用window.innerHetght，至于原因，我们可以直接输出document.body.offsetTop来看看他的值就知道了。