一个支持Drag页面拖动的组件

页面元素拖动(Drap)是一个很酷的效果,这里我收集整理了网上的一些示例,加上自己的体会,把这个组件封装了起来.代码很简单,如下所示:

var Drag = function(element){
   var _element = element;
   
   var x,y;
   this.initialize = function(){
       _element.style.position = "absolute";
       _element.onmousedown = _onmousedown;
       document.onmouseup = _onmouseup;
   }
   function _onmousedown(){                
       x=event.offsetX;  
       y=event.offsetY;
       document.onmousemove = _onmousemove;
       event.returnValue = false;
   };
   function _onmousemove(){         
       _element.style.left=event.clientX-x;
       _element.style.top=event.clientY-y;
       event.returnValue = false;
   };
   function _onmouseup(){
       document.onmousemove=null;
   };
}

    应用起来也相当简单,只需编写如下两行代码即可:

    如果只应用如上代码,则只支持IE.要考虑支持不同浏览器,请查看本例的源代码,我加了一个支持不同浏览器的兼容文件.