<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
div{100px;height:100px;background:green;position:absolute;top:10px;left:10px;}
</style>
</head>
<body>
<div id="div"></div>
<script>
var div = document.getElementById("div");
var dx = 0;
var dy = 0;
div.onmousedown = function(e){
var evt = e || window.event;
// 鼠标点击 div 的位置
dx = evt.clientX - div.offsetLeft;
dy = evt.clientY - div.offsetTop;
document.onmousemove = function(ev){
var evt = ev || window.event;
var nx = evt.clientX;
var ny = evt.clientY;
// 移动 div 重新设置 新的位置
div.style.left = nx - dx + 'px';
div.style.top = ny - dy + 'px';
}
}
div.onmouseup = function(){
// 取消移动的事件
document.onmousemove = null;
}
</script>
</body>
</html>