html:

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><!--<scriptsrc="jquery-1.9.1.min.js"></script>--><style>#drag{background:red;width:200px;height:200px;cursor:move;position:fixed;top:0;left:0;}</style></head><body><divid="drag"></div><scriptsrc="scripts/test.js"></script></body></html>

js:

window.onload=function(){vardrag=newDrag("drag");drag.init();}//获取浏览器窗口宽度functiongetInner(){varpageWidth=window.innerWidth;varpageHeight=window.innerHeight;if(typeofpageWidth!="number"){if(document.compatMode=="CSS1Compat"){pageWidth=document.documentElement.clientWidth;pageHeight=document.documentElement.clientHeight;}else{pageWidth=document.body.clientWidth;pageHeight=document.body.clientHeight;}}return{width:pageWidth,height:pageHeight};}//构造函数functionDrag(id){this.obj=document.getElementById("drag");this.disx=0;this.disy=0;}Drag.prototype.init=function(){//this指针varme=this;this.obj.||event;me.onmouseDown(e);//阻止默认事件returnfalse;}}Drag.prototype.onmouseDown=function(e){//this指针varme=this;this.disx=e.clientX-this.obj.offsetLeft;this.disy=e.clientY-this.obj.offsetTop;document.||event;me.onmouseMove(e);}document.onmouseup=function(){me.mouseUp();}}Drag.prototype.onmouseMove=function(e){//this指针varlf=e.clientX-this.disx;vartp=e.clientY-this.disy;if(lf<0){//防止拖曳层超出左边界lf=0;}elseif(lf>getInner().width-this.obj.offsetWidth){lf=getInner().width-this.obj.offsetWidth;//防止拖曳层超出右边界}if(tp<0){tp=0;//防止拖曳层超出上边界}elseif(tp>getInner().height-this.obj.offsetHeight){tp=getInner().height-this.obj.offsetHeight;//防止拖曳层超出下边界}this.obj.style.left=lf+'px';this.obj.style.top=tp+'px';};Drag.prototype.mouseUp=function(){document.onmousemove=null;document.onmouseup=null;};