DIV拖動及DOM2移除事件注意事項

-->



 

 /**
 * 綁定事件
 **/ 
 var addEvent = function(obj, eventName, handle) {

 if(window.addEventListener) {
 obj.addEventListener(eventName, handle, false);
 }else {
 obj.attachEvent("on" + eventName, handle);
 }
 }

 var removeEvent = function (obj, eventName, handle){ 
 if (window.removeEventListener) {
 obj.removeEventListener(eventName, handle, false);
 }else if(window.detachEvent){ 
 obj.detachEvent("on" + eventName, handle); 
 }else {
 obj["on"+eventName] = null;
 }

 }; 

 var $ = function(id) {
 return "string" == typeof id ? document.getElementById(id) : id;
 }

 //js兼容性
 var page = {
 event: function (evt) {
 var ev = evt || window.event;
 return ev;
 },
 target: function(evt) {
 return evt.target || evt.srcElement;
 },
 pageX: function (evt) {
 var e = this.event(evt);
 return e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft);
 },
 pageY: function (evt) {
 var e = this.event(evt);
 return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
 },
 layerX: function (evt) {
 var e = this.event(evt);
 return e.layerX || e.offsetX;
 },
 layerY: function (evt) {
 var e = this.event(evt);
 return e.layerY || e.offsetY;
 }
 } 

 var drag = function(obj) {
 obj.style.position="absolute";
 var mousedownFun, mousemoveFun, mouseupFun, x, y, target;
 mousedownFun = function(event){
 target = page.target(event);
 x = page.layerX(event);
 y = page.layerY(event); 
 
 addEvent(obj,"mousemove", mousemoveFun);

 addEvent(obj,"mouseup", mouseupFun);
 };

 mousemoveFun = function(event){
 var tx = page.pageX(event) - x;
 var ty = page.pageY(event) - y;
 target.style.left = tx + "px";
 target.style.top = ty + "px";
 };

 mouseupFun = function(event) {
 removeEvent(obj, "mousemove",mousemoveFun);
 removeEvent(obj, "mouseup",mouseupFun);
 }
 addEvent(obj,"mousedown", mousedownFun);
 }

 drag($("div2"));