鼠标拖移事件（练习）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: red;position: absolute;"></div>
<script type="text/javascript">
var box=document.getElementById("box");
box.onmousedown=function(ev){ //鼠标按下事件
var e=event||ev;
var mx=e.clientX; //获得可视区域坐标
var my=e.clientY;
var dx=this.offsetLeft; //鼠标到div的坐标值
var dy=this.offsetTop;
var disx=mx-dx; // 窗口到外边距坐标值
var disy=my-dy;
document.onmousemove=function(er){
var e=event||ev
var mx=e.clientX;
var my=e.clientY;
var x=mx-disx; //移动的坐标值
var y=my-disy;
box.style.left=x+"px"; //设置
box.style.top=y+"px";
}
document.onmouseup=function(ev){ //点击鼠标松开
document.onmousemove=null; //不移动
}
}
</script>
</body>
</html>
