<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#d01{
100px;
height: 100px;
background-color: red;
position: absolute;
}
#d02{
100px;
height: 100px;
background-color: darkgreen;
position: absolute;
right: 220px;
top: 220px;
}
</style>
<body>
<div id="d01">
</div>
<div id="d02">
</div>
</body>
<script type="text/javascript">
/*拖拽d01元素
*-拖拽的流程：
* 1.当鼠标按下，开始拖拽 onmousedown
* 2.跟随鼠标移动 onmousemove
* 3.鼠标松开,元素固定在当前点 onmouseup
*/
var d01=document.getElementById("d01");
// 1.当鼠标按下
d01.onmousedown=function(){
// alert("鼠标按下，开始拖拽");
//设置鼠标点哪就是那的偏移量
//event.clientX-元素.offsetLeft
var ol=event.clientX-d01.offsetLeft;
var ot=event.clientY-d01.offsetTop;
// 2.跟随鼠标移动
document.onmousemove=function(event){
//改css移动d01
d01.style.left=event.clientX-ol+"px"; // -ol 完成偏移量
d01.style.top=event.clientY-ot+"px";
}
// 3.鼠标松开,元素固定在当前点
document.onmouseup=function(){ //document下的事件而不是d01,不然时间在另一块上消失
//就是取消onmousemove事件
document.onmousemove=null;
document.onmouseup=null; //一次性的事件，防止按下松开空白还存在这个事件
//alert("松开了");
}
/*
* 浏览器默认会有拖拽内容去搜索它，会出现写的拖拽不希望实现这时候要取消浏览器默认拖拽
*/
return false;
}
</script>
</html>