<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽效果</title>
<style type="text/css">
#box{
width:300px;
height:300px;
background:greenyellow;
opacity: 0.7;
position: absolute;
left: 100px;
top:50px;
}
</style>
</head>
<body>
<div id="box"></div>
<script src="script.js"></script>
</body>
</html>
//鼠标按下 鼠标移动 鼠标释放
var box = document.getElementById("box");
box.onmousedown= function(e){
var e = window.event || e;
var left = e.clientX-box.offsetLeft;
var top = e.clientY - box.offsetTop;
document.onmousemove = function(e){
var e = window.event || e;
box.style.left = e.clientX-left+"px";
box.style.top = e.clientY - top+"px";
}
}
box.onmouseup = function(e){
document.onmousemove = null ; //dom 0 级删除事件
}