<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box{ position: absolute; width: 200px; height: 200px; background: red; } </style> <script> window.onload=function(){ var drag=new Drag("box") drag.init(); } //构造函数Drag function Drag(id){ this.obj=document.getElementById(id); this.disX=0; this.disY=0; } Drag.prototype.init = function (){ var me = this; this.obj.onmousedown = function (e){ var e = e || event; me.mouseDown(e); // 阻止默认事件 return false; }; }; Drag.prototype.mouseDown=function(e){ var me=this; this.disX = e.clientX - this.obj.offsetLeft; this.disY = e.clientY - this.obj.offsetTop; document.onmousemove=function(e){ var e=e||window.event; me.mouseMove(e); }; document.onmouseup = function (){ me.mouseUp(); } } Drag.prototype.mouseMove = function (e){ this.obj.style.left = (e.clientX - this.disX) + 'px'; this.obj.style.top = (e.clientY - this.disY) + 'px'; }; Drag.prototype.mouseUp = function (){ document.onmousemove = null; //如果不卸载这个事件的话，鼠标抬起后，移动鼠标，div依然会移动。 document.onmouseup = null; };