<!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>