//Drag.js window.onload=function(){ new Drag("box1") } //第四步:全局变量变成属性 该加this加this // var oDiv=null; // var disX=0; // var disY=0; //第三步:Window.onload改成构造函数 function Drag(id){ this.disX=0 this.disY=0 var _this=this; this.oDiv=document.getElementById(id); this.oDiv.onmousedown=function(){ //第六步 修改当前的从属关系 _this.fnDown() }; } //第五步:把函数改为Drag原型方法 Drag.prototype.fnDown=function(ev){ var _this=this; var oEvent=ev||event; this.disX = oEvent.clientX-this.oDiv.offsetLeft; this.disY = oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function(ev){ _this.fnMove(ev) } document.onmouseup=function(){ _this.fnUp() } } Drag.prototype.fnMove=function(ev){ var oEvent=ev||event; this.oDiv.style.left=oEvent.clientX-this.disX+'px'; this.oDiv.style.top=oEvent.clientY-this.disY+'px'; } Drag.prototype.fnUp=function(){ document.onmousemove=null; document.onmouseup=null; }