<html>
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: yellow;
position:absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: red;
position:absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload =function(){
var box1=document.getElementById("box1");
box1.onmousedown =function(){
document.onmousemove=function(event){
event =event||window.event;
var left=event.clientX;
var top=event.clientY;
box1.style.left=left+"px";
box1.style.top=top+"px";
document.onmouseup = function(){
document.onmousemove=null;
};
};
};
};
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
主要是三个函数，onload等界面加载完成后这个不算。
mousedown鼠标按下（）{
触发鼠标移动会怎么怎么样（），，，
鼠标抬起（事件结束）
}