<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
background-color: #0ff;
position: absolute;
left: 0;
top:0;
}
</style>
</head>
<body>
<div class="box"></div>
<script type="text/javascript">
var box=document.querySelector(".box");
var e=event||window.event;
box.onmousedown=function(e){
var ox=e.clientX-this.offsetLeft;
var oy=e.clientY-this.offsetTop;
console.log(ox+" "+oy)
document.onmousemove=function(e){
box.style.left=e.clientX-ox+'px';
box.style.top=e.clientY-oy+'px';
}
box.onmouseup=function(){
document.onmousemove=null
}
}
</script>
</body>
</html>
