可拉伸移动的DIV层，使用的是一个自定义的JS类，看上去不像是JQUERY那类东西，基于JavaScript。不过这个拖动层效果挺不错，可以在一个网页上放置三个这样的层，每一个层都具备选中效果，也就是当点击某个DIV的时候，它的四周会出现小方框，这个效果还能用于其它地方。

 

 
  
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
  3. <head> 
  4. <title>【荐】JavaScript实现可上下左右拉伸移动的DIV层_网页代码站(www.webdm.cn)</title> 
  5. <script> 
  6. if(typeof addEvent!='function'){var addEvent=function(o,t,f,l){var d='addEventListener',n='on'+t,rO=o,rT=t,rF=f,rL=l;if(o[d]&&!l)return o[d](t,f,false);if(!o._evts)o._evts={};if(!o._evts[t]){o._evts[t]=o[n]?{b:o[n]}:{};o[n]=new Function('e','var r=true,o=this,a=o._evts["'+t+'"],i;for(i in a){o._f=a[i];r=o._f(e||window.event)!=false&&r;o._f=null}return r');if(t!='unload')addEvent(window,'unload',function(){removeEvent(rO,rT,rF,rL)})}if(!f._i)f._i=addEvent._i++;o._evts[t][f._i]=f};addEvent._i=1;var removeEvent=function(o,t,f,l){var d='removeEventListener';if(o[d]&&!l)return o[d](t,f,false);if(o._evts&&o._evts[t]&&f._i)delete o._evts[t][f._i]}}function cancelEvent(e,c){e.returnValue=false;if(e.preventDefault)e.preventDefault();if(c){e.cancelBubble=true;if(e.stopPropagation)e.stopPropagation()}};function DragResize(myName,config){var props={myName:myName,enabled:true,handles:['tl','tm','tr','ml','mr','bl','bm','br'],isElement:null,isHandle:null,element:null,handle:null,minWidth:10,minHeight:10,minLeft:0,maxLeft:9999,minTop:0,maxTop:9999,zIndex:1,mouseX:0,mouseY:0,lastMouseX:0,lastMouseY:0,mOffX:0,mOffY:0,elmX:0,elmY:0,elmW:0,elmH:0,allowBlur:true,ondragfocus:null,ondragstart:null,ondragmove:null,ondragend:null,ondragblur:null};for(var p in props)this[p]=(typeof config[p]=='undefined')?props[p]:config[p]};DragResize.prototype.apply=function(node){var obj=this;addEvent(node,'mousedown',function(e){obj.mouseDown(e)});addEvent(node,'mousemove',function(e){obj.mouseMove(e)});addEvent(node,'mouseup',function(e){obj.mouseUp(e)})};DragResize.prototype.select=function(newElement){with(this){if(!document.getElementById||!enabled)return;if(newElement&&(newElement!=element)&&enabled){element=newElement;element.style.zIndex=++zIndex;if(this.resizeHandleSet)this.resizeHandleSet(element,true);elmX=parseInt(element.style.left);elmY=parseInt(element.style.top);elmW=element.offsetWidth;elmH=element.offsetHeight;if(ondragfocus)this.ondragfocus()}}};DragResize.prototype.deselect=function(delHandles){with(this){if(!document.getElementById||!enabled)return;if(delHandles){if(ondragblur)this.ondragblur();if(this.resizeHandleSet)this.resizeHandleSet(element,false);element=null}handle=null;mOffX=0;mOffY=0}};DragResize.prototype.mouseDown=function(e){with(this){if(!document.getElementById||!enabled)return true;var eelm=e.target||e.srcElement,newElement=null,newHandle=null,hRE=new RegExp(myName+'-([trmbl]{2})','');while(elm){if(elm.className){if(!newHandle&&(hRE.test(elm.className)||isHandle(elm)))newHandle=elm;if(isElement(elm)){newElement=elm;break}}elmelm=elm.parentNode}if(element&&(element!=newElement)&&allowBlur)deselect(true);if(newElement&&(!element||(newElement==element))){if(newHandle)cancelEvent(e);select(newElement,newHandle);handle=newHandle;if(handle&&ondragstart)this.ondragstart(hRE.test(handle.className))}}};DragResize.prototype.mouseMove=function(e){with(this){if(!document.getElementById||!enabled)return true;mouseX=e.pageX||e.clientX+document.documentElement.scrollLeft;mouseY=e.pageY||e.clientY+document.documentElement.scrollTop;var diffX=mouseX-lastMouseX+mOffX;var diffY=mouseY-lastMouseY+mOffY;mOffX=mOffY=0;lastMouseX=mouseX;lastMouseY=mouseY;if(!handle)return true;var isResize=false;if(this.resizeHandleDrag&&this.resizeHandleDrag(diffX,diffY)){isResize=true}else{var dX=diffX,dY=diffY;if(elmX+dX<minLeft)mOffX=(dX-(diffX=minLeft-elmX));else if(elmX+elmW+dX>maxLeft)mOffX=(dX-(diffX=maxLeft-elmX-elmW));if(elmY+dY<minTop)mOffY=(dY-(diffY=minTop-elmY));else if(elmY+elmH+dY>maxTop)mOffY=(dY-(diffY=maxTop-elmY-elmH));elmX+=diffX;elmY+=diffY}with(element.style){left=elmX+'px';width=elmW+'px';top=elmY+'px';height=elmH+'px'}if(window.opera&&document.documentElement){var oDF=document.getElementById('op-drag-fix');if(!oDF){var oDF=document.createElement('input');oDF.id='op-drag-fix';oDF.style.display='none';document.body.appendChild(oDF)}oDF.focus()}if(ondragmove)this.ondragmove(isResize);cancelEvent(e)}};DragResize.prototype.mouseUp=function(e){with(this){if(!document.getElementById||!enabled)return;var hRE=new RegExp(myName+'-([trmbl]{2})','');if(handle&&ondragend)this.ondragend(hRE.test(handle.className));deselect(false)}};DragResize.prototype.resizeHandleSet=function(elm,show){with(this){if(!elm._handle_tr){for(var h=0;h<handles.length;h++){var hDiv=document.createElement('div');hDiv.className=myName+' '+myName+'-'+handles[h];elm['_handle_'+handles[h]]=elm.appendChild(hDiv)}}for(var h=0;h<handles.length;h++){elm['_handle_'+handles[h]].style.visibility=show?'inherit':'hidden'}}};DragResize.prototype.resizeHandleDrag=function(diffX,diffY){with(this){var hClass=handle&&handle.className&&handle.className.match(new RegExp(myName+'-([tmblr]{2})'))?RegExp.$1:'';var dY=diffY,dX=diffX,processed=false;if(hClass.indexOf('t')>=0){rs=1;if(elmH-dY<minHeight)mOffY=(dY-(diffY=elmH-minHeight));else if(elmY+dY<minTop)mOffY=(dY-(diffY=minTop-elmY));elmY+=diffY;elmH-=diffY;processed=true}if(hClass.indexOf('b')>=0){rs=1;if(elmH+dY<minHeight)mOffY=(dY-(diffY=minHeight-elmH));else if(elmY+elmH+dY>maxTop)mOffY=(dY-(diffY=maxTop-elmY-elmH));elmH+=diffY;processed=true}if(hClass.indexOf('l')>=0){rs=1;if(elmW-dX<minWidth)mOffX=(dX-(diffX=elmW-minWidth));else if(elmX+dX<minLeft)mOffX=(dX-(diffX=minLeft-elmX));elmX+=diffX;elmW-=diffX;processed=true}if(hClass.indexOf('r')>=0){rs=1;if(elmW+dX<minWidth)mOffX=(dX-(diffX=minWidth-elmW));else if(elmX+elmW+dX>maxLeft)mOffX=(dX-(diffX=maxLeft-elmX-elmW));elmW+=diffX;processed=true}return processed}};  
  7. </script> 
  8. <style type="text/css"> 
  9. .codefans_net{  
  10. position: absolute;  
  11. border: 1px solid #333;  
  12. }  
  13.  
  14. .drsMoveHandle {  
  15. height: 20px;  
  16. background-color: #CCC;  
  17. border-bottom: 1px solid #666;  
  18. cursor: move;  
  19. }  
  20.  
  21. .dragresize {  
  22. position: absolute;  
  23. width: 5px;  
  24. height: 5px;  
  25. font-size: 1px;  
  26. background: #EEE;  
  27. border: 1px solid #333;  
  28. }  
  29.  
  30. .dragresize-tl {  
  31. top: -8px;  
  32. left: -8px;  
  33. cursor: nw-resize;  
  34. }  
  35. .dragresize-tm {  
  36. top: -8px;  
  37. left: 50%;  
  38. margin-left: -4px;  
  39. cursor: n-resize;  
  40. }  
  41. .dragresize-tr {  
  42. top: -8px;  
  43. right: -8px;  
  44. cursor: ne-resize;  
  45. }  
  46.  
  47. .dragresize-ml {  
  48. top: 50%;  
  49. margin-top: -4px;  
  50. left: -8px;  
  51. cursor: w-resize;  
  52. }  
  53. .dragresize-mr {  
  54. top: 50%;  
  55. margin-top: -4px;  
  56. right: -8px;  
  57. cursor: e-resize;  
  58. }  
  59.  
  60. .dragresize-bl {  
  61. bottom: -8px;  
  62. left: -8px;  
  63. cursor: sw-resize;  
  64. }  
  65. .dragresize-bm {  
  66. bottom: -8px;  
  67. left: 50%;  
  68. margin-left: -4px;  
  69. cursor: s-resize;  
  70. }  
  71. .dragresize-br {  
  72. bottom: -8px;  
  73. right: -8px;  
  74. cursor: se-resize;  
  75. }  
  76.  
  77. </style> 
  78.  
  79. <script type="text/javascript"> 
  80. //<![CDATA[  
  81. var dragresize = new DragResize('dragresize',  
  82. { minWidth: 50, minHeight: 50, minLeft: 20, minTop: 20, maxLeft: 954, maxTop: 800 });  
  83. dragresize.isElement = function(elm)  
  84. {  
  85. if (elm.className && elm.className.indexOf('codefans_net') > -1) return true;  
  86. };  
  87. dragresize.isHandle = function(elm)  
  88. {  
  89. if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;  
  90. };  
  91.  
  92. dragresize.ondragfocus = function() { };  
  93. dragresize.ondragstart = function(isResize) { };  
  94. dragresize.ondragmove = function(isResize) { };  
  95. dragresize.ondragend = function(isResize) { };  
  96. dragresize.ondragblur = function() { };  
  97. dragresize.apply(document);  
  98. //]]> 
  99. </script> 
  100. </head> 
  101. <body style="font: 13px/20px sans-serif; background-color: #FFF"> 
  102. <div style="text-align: center"> 
  103. 网页代码站，高品质源码集中营。  
  104. </div> 
  105. <div class="codefans_net" 
  106. style="left: 50px; top: 150px; width: 250px; height: 120px;  
  107. background: #CDF; text-align: center"> 
  108. <div class="drsMoveHandle">这里是窗口标题</div> 
  109. 我们的网址：<a href="#">www.webdm.cn</a><br/>欢迎访问。  
  110. </div> 
  111. <div class="codefans_net" 
  112. style="left: 20px; top: 300px; width: 150px; height: 300px;  
  113. background: #FDC; text-align: center"> 
  114. <div class="drsMoveHandle">精品源码</div> 
  115. 这里是内容<br/> 
  116. </div> 
  117. <div class="codefans_net drsMoveHandle" 
  118. style="left: 150px; top: 280px; width: 100px; height: 100px;  
  119. background: #DFC; text-align: center"> 
  120. 这里您自定义吧……  
  121. </div> 
  122. <div style="margin-top: 400px"><!-- spacer --></div> 
  123. <br /> 
  124. <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！</p> 
  125.  
  126. </body> 
  127. </html>