拖拽事件改造过程：
1、正常写法

 window.onload = function(){var oDiv = document.getElementById("div1");oDiv.onmousedown = function(ev){var e = ev || window.event;var offsetX = e.clientX - oDiv.offsetLeft;var offsetY = e.clientY - oDiv.offsetTop;document.onmousemove = function(ev) {var e = ev || window.event;oDiv.style.left = e.clientX - offsetX + "px";oDiv.style.top = e.clientY - offsetY + "px";}}document.onmouseup = function(){document.onmousemove = null;}}

2、改造：1）不能有函数嵌套 2）可以有全局变量

           var oDiv = null;var offsetX = 0;var offsetY = 0;window.onload = function(){oDiv = document.getElementById("div1");oDiv.onmousedown = funcDown;document.onmouseup = funcUp;}function funcDown(ev){var e = ev || window.event;offsetX = e.clientX - oDiv.offsetLeft;offsetY = e.clientY - oDiv.offsetTop;document.onmousemove = funcMove;}function funcMove(ev) {var e = ev || window.event;oDiv.style.left = e.clientX - offsetX + "px";oDiv.style.top = e.clientY - offsetY + "px";}function funcUp(){document.onmousemove = null;}

3、面向对象过程：
面向过程 => 面向对象
1）、window.onload => 构造函数
2）、全局变量 => 构造函数的属性
3）、全局函数 => 构造函数的方法

function Drag(id){this.oDiv = document.getElementById(id);var _this = this;this.oDiv.onmousedown = function(ev){_this.funcDown(ev);};document.onmouseup = function(){_this.funcUp();};}Drag.prototype.funcDown = function(ev){var e = ev || window.event;this.offsetX = e.clientX - this.oDiv.offsetLeft;this.offsetY = e.clientY - this.oDiv.offsetTop;var _this = this;document.onmousemove = function(ev){_this.funcMove(ev);};}Drag.prototype.funcMove = function(ev) {var e = ev || window.event;this.oDiv.style.left = e.clientX - this.offsetX + "px";this.oDiv.style.top = e.clientY - this.offsetY + "px";}Drag.prototype.funcUp = function(){document.onmousemove = null;}window.onload = function(){new Drag("div1");}

【注】清楚this指向
this指向当前函数的主人
总结this容易混乱的部分
1、事件绑定
2、定时器
解决方法：在当前函数里里将 var _this=this 或者 this.函数名.bind(this);