JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

转自《JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)》： http://www.jb51.net/article/73157.htm

 

这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下

 

本文实例讲述了JS实现漂亮的窗口拖拽效果。分享给大家供大家参考。具体如下：

这是一款漂亮的JS窗口拖拽效果（改变大小/最小化/最大化/还原/关闭）

特点：

① 窗口可以拖动；
② 窗口可以通过八个方向改变大小；
③ 窗口可以最小化、最大化、还原、关闭；
④ 限制窗口最小宽度/高度。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-win-drug-cha-close-demo/

具体代码如下：

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
"http://www.w3.org/1999/xhtml" >

"Content-Type" content= "text/html; charset=utf-8" />

窗口拖拽（改变大小/最小化/最大化/还原/关闭）
<code class="js string">"text/css"</code> <code class="js plain">> </code> </div> <div class="line number8 index7 alt1"> <code class="js plain">body,div,h2{margin:0;padding:0;}</code> </div> <div class="line number9 index8 alt2"> <code class="js plain">body{background:url(images/bg.jpg);font:12px/1.5 \5fae\8f6f\96c5\9ed1;color:</code> <code class="js preprocessor">#333;}</code> </div> <div class="line number10 index9 alt1"> <code class="js preprocessor">#drag{position:absolute;top:100px;left:100px;width:300px;height:160px;background:#e9e9e9;border:1px solid #444;border-radius:5px;box-shadow:0 1px 3px 2px #666;}</code> </div> <div class="line number11 index10 alt2"> <code class="js preprocessor">#drag .title{position:relative;height:27px;margin:5px;}</code> </div> <div class="line number12 index11 alt1"> <code class="js preprocessor">#drag .title h2{font-size:14px;height:27px;line-height:24px;border-bottom:1px solid #A1B4B0;}</code> </div> <div class="line number13 index12 alt2"> <code class="js preprocessor">#drag .title div{position:absolute;height:19px;top:2px;right:0;}</code> </div> <div class="line number14 index13 alt1"> <code class="js preprocessor">#drag .title a,a.open{float:left;width:21px;height:19px;display:block;margin-left:5px;background:url(images/tool.png) no-repeat;}</code> </div> <div class="line number15 index14 alt2"> <code class="js plain">a.open{position:absolute;top:10px;left:50%;margin-left:-10px;background-position:0 0;}</code> </div> <div class="line number16 index15 alt1"> <code class="js plain">a.open:hover{background-position:0 -29px;}</code> </div> <div class="line number17 index16 alt2"> <code class="js preprocessor">#drag .title a.min{background-position:-29px 0;}</code> </div> <div class="line number18 index17 alt1"> <code class="js preprocessor">#drag .title a.min:hover{background-position:-29px -29px;}</code> </div> <div class="line number19 index18 alt2"> <code class="js preprocessor">#drag .title a.max{background-position:-60px 0;}</code> </div> <div class="line number20 index19 alt1"> <code class="js preprocessor">#drag .title a.max:hover{background-position:-60px -29px;}</code> </div> <div class="line number21 index20 alt2"> <code class="js preprocessor">#drag .title a.revert{background-position:-149px 0;display:none;}</code> </div> <div class="line number22 index21 alt1"> <code class="js preprocessor">#drag .title a.revert:hover{background-position:-149px -29px;}</code> </div> <div class="line number23 index22 alt2"> <code class="js preprocessor">#drag .title a.close{background-position:-89px 0;}</code> </div> <div class="line number24 index23 alt1"> <code class="js preprocessor">#drag .title a.close:hover{background-position:-89px -29px;}</code> </div> <div class="line number25 index24 alt2"> <code class="js preprocessor">#drag .content{overflow:auto;margin:0 5px;}</code> </div> <div class="line number26 index25 alt1"> <code class="js preprocessor">#drag .resizeBR{position:absolute;width:14px;height:14px;right:0;bottom:0;overflow:hidden;cursor:nw-resize;background:url(images/resize.png) no-repeat;}</code> </div> <div class="line number27 index26 alt2"> <code class="js preprocessor">#drag .resizeL,#drag .resizeT,#drag .resizeR,#drag .resizeB,#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{position:absolute;background:#000;overflow:hidden;opacity:0;filter:alpha(opacity=0);}</code> </div> <div class="line number28 index27 alt1"> <code class="js preprocessor">#drag .resizeL,#drag .resizeR{top:0;width:5px;height:100%;cursor:w-resize;}</code> </div> <div class="line number29 index28 alt2"> <code class="js preprocessor">#drag .resizeR{right:0;}</code> </div> <div class="line number30 index29 alt1"> <code class="js preprocessor">#drag .resizeT,#drag .resizeB{width:100%;height:5px;cursor:n-resize;}</code> </div> <div class="line number31 index30 alt2"> <code class="js preprocessor">#drag .resizeT{top:0;}</code> </div> <div class="line number32 index31 alt1"> <code class="js preprocessor">#drag .resizeB{bottom:0;}</code> </div> <div class="line number33 index32 alt2"> <code class="js preprocessor">#drag .resizeLT,#drag .resizeTR,#drag .resizeLB{width:8px;height:8px;background:#FF0;}</code> </div> <div class="line number34 index33 alt1"> <code class="js preprocessor">#drag .resizeLT{top:0;left:0;cursor:nw-resize;}</code> </div> <div class="line number35 index34 alt2"> <code class="js preprocessor">#drag .resizeTR{top:0;right:0;cursor:ne-resize;}</code> </div> <div class="line number36 index35 alt1"> <code class="js preprocessor">#drag .resizeLB{left:0;bottom:0;cursor:ne-resize;}</code> </div> <div class="line number37 index36 alt2"> <code class="js plain">
<code class="js string">"text/javascript"</code> <code class="js plain">> </code> </div> <div class="line number39 index38 alt2"> <code class="js comments">/*-------------------------- +</code> </div> <div class="line number40 index39 alt1"> <code class="js spaces"> </code> <code class="js comments">获取id, class, tagName</code> </div> <div class="line number41 index40 alt2"> <code class="js spaces"> </code> <code class="js comments">+-------------------------- */</code> </div> <div class="line number42 index41 alt1"> <code class="js keyword">var</code> <code class="js plain">get = {</code> </div> <div class="line number43 index42 alt2"> <code class="js spaces">  </code> <code class="js plain">byId: </code> <code class="js keyword">function</code> <code class="js plain">(id) {</code> </div> <div class="line number44 index43 alt1"> <code class="js spaces">    </code> <code class="js keyword">return</code> <code class="js keyword">typeof</code> <code class="js plain">id === </code> <code class="js string">"string"</code> <code class="js plain">? document.getElementById(id) : id</code> </div> <div class="line number45 index44 alt2"> <code class="js spaces">  </code> <code class="js plain">},</code> </div> <div class="line number46 index45 alt1"> <code class="js spaces">  </code> <code class="js plain">byClass: </code> <code class="js keyword">function</code> <code class="js plain">(sClass, oParent) {</code> </div> <div class="line number47 index46 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">aClass = [];</code> </div> <div class="line number48 index47 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">reClass = </code> <code class="js keyword">new</code> <code class="js plain">RegExp(</code> <code class="js string">"(^| )"</code> <code class="js plain">+ sClass + </code> <code class="js string">"( |$)"</code> <code class="js plain">);</code> </div> <div class="line number49 index48 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">aElem = </code> <code class="js keyword">this</code> <code class="js plain">.byTagName(</code> <code class="js string">"*"</code> <code class="js plain">, oParent);</code> </div> <div class="line number50 index49 alt1"> <code class="js spaces">    </code> <code class="js keyword">for</code> <code class="js plain">(</code> <code class="js keyword">var</code> <code class="js plain">i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);</code> </div> <div class="line number51 index50 alt2"> <code class="js spaces">    </code> <code class="js keyword">return</code> <code class="js plain">aClass</code> </div> <div class="line number52 index51 alt1"> <code class="js spaces">  </code> <code class="js plain">},</code> </div> <div class="line number53 index52 alt2"> <code class="js spaces">  </code> <code class="js plain">byTagName: </code> <code class="js keyword">function</code> <code class="js plain">(elem, obj) {</code> </div> <div class="line number54 index53 alt1"> <code class="js spaces">    </code> <code class="js keyword">return</code> <code class="js plain">(obj || document).getElementsByTagName(elem)</code> </div> <div class="line number55 index54 alt2"> <code class="js spaces">  </code> <code class="js plain">}</code> </div> <div class="line number56 index55 alt1"> <code class="js plain">};</code> </div> <div class="line number57 index56 alt2"> <code class="js keyword">var</code> <code class="js plain">dragMinWidth = 250;</code> </div> <div class="line number58 index57 alt1"> <code class="js keyword">var</code> <code class="js plain">dragMinHeight = 124;</code> </div> <div class="line number59 index58 alt2"> <code class="js comments">/*-------------------------- +</code> </div> <div class="line number60 index59 alt1"> <code class="js spaces"> </code> <code class="js comments">拖拽函数</code> </div> <div class="line number61 index60 alt2"> <code class="js spaces"> </code> <code class="js comments">+-------------------------- */</code> </div> <div class="line number62 index61 alt1"> <code class="js keyword">function</code> <code class="js plain">drag(oDrag, handle)</code> </div> <div class="line number63 index62 alt2"> <code class="js plain">{</code> </div> <div class="line number64 index63 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">disX = dixY = 0;</code> </div> <div class="line number65 index64 alt2"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oMin = get.byClass(</code> <code class="js string">"min"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number66 index65 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oMax = get.byClass(</code> <code class="js string">"max"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number67 index66 alt2"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oRevert = get.byClass(</code> <code class="js string">"revert"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number68 index67 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oClose = get.byClass(</code> <code class="js string">"close"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number69 index68 alt2"> <code class="js spaces">  </code> <code class="js plain">handle = handle || oDrag;</code> </div> <div class="line number70 index69 alt1"> <code class="js spaces">  </code> <code class="js plain">handle.style.cursor = </code> <code class="js string">"move"</code> <code class="js plain">;</code> </div> <div class="line number71 index70 alt2"> <code class="js spaces">  </code> <code class="js plain">handle.onmousedown = </code> <code class="js keyword">function</code> <code class="js plain">(event)</code> </div> <div class="line number72 index71 alt1"> <code class="js spaces">  </code> <code class="js plain">{</code> </div> <div class="line number73 index72 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">event = event || window.event;</code> </div> <div class="line number74 index73 alt1"> <code class="js spaces">    </code> <code class="js plain">disX = event.clientX - oDrag.offsetLeft;</code> </div> <div class="line number75 index74 alt2"> <code class="js spaces">    </code> <code class="js plain">disY = event.clientY - oDrag.offsetTop;</code> </div> <div class="line number76 index75 alt1"> <code class="js spaces">    </code> <code class="js plain">document.onmousemove = </code> <code class="js keyword">function</code> <code class="js plain">(event)</code> </div> <div class="line number77 index76 alt2"> <code class="js spaces">    </code> <code class="js plain">{</code> </div> <div class="line number78 index77 alt1"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">event = event || window.event;</code> </div> <div class="line number79 index78 alt2"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">iL = event.clientX - disX;</code> </div> <div class="line number80 index79 alt1"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">iT = event.clientY - disY;</code> </div> <div class="line number81 index80 alt2"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">maxL = document.documentElement.clientWidth - oDrag.offsetWidth;</code> </div> <div class="line number82 index81 alt1"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">maxT = document.documentElement.clientHeight - oDrag.offsetHeight;</code> </div> <div class="line number83 index82 alt2"> <code class="js spaces">      </code> <code class="js plain">iL <= 0 && (iL = 0);</code> </div> <div class="line number84 index83 alt1"> <code class="js spaces">      </code> <code class="js plain">iT <= 0 && (iT = 0);</code> </div> <div class="line number85 index84 alt2"> <code class="js spaces">      </code> <code class="js plain">iL >= maxL && (iL = maxL);</code> </div> <div class="line number86 index85 alt1"> <code class="js spaces">      </code> <code class="js plain">iT >= maxT && (iT = maxT);</code> </div> <div class="line number87 index86 alt2"> <code class="js spaces">      </code> <code class="js plain">oDrag.style.left = iL + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number88 index87 alt1"> <code class="js spaces">      </code> <code class="js plain">oDrag.style.top = iT + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number89 index88 alt2"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> </div> <div class="line number90 index89 alt1"> <code class="js spaces">    </code> <code class="js plain">};</code> </div> <div class="line number91 index90 alt2"> <code class="js spaces">    </code> <code class="js plain">document.onmouseup = </code> <code class="js keyword">function</code> <code class="js plain">()</code> </div> <div class="line number92 index91 alt1"> <code class="js spaces">    </code> <code class="js plain">{</code> </div> <div class="line number93 index92 alt2"> <code class="js spaces">      </code> <code class="js plain">document.onmousemove = </code> <code class="js keyword">null</code> <code class="js plain">;</code> </div> <div class="line number94 index93 alt1"> <code class="js spaces">      </code> <code class="js plain">document.onmouseup = </code> <code class="js keyword">null</code> <code class="js plain">;</code> </div> <div class="line number95 index94 alt2"> <code class="js spaces">      </code> <code class="js keyword">this</code> <code class="js plain">.releaseCapture && </code> <code class="js keyword">this</code> <code class="js plain">.releaseCapture()</code> </div> <div class="line number96 index95 alt1"> <code class="js spaces">    </code> <code class="js plain">};</code> </div> <div class="line number97 index96 alt2"> <code class="js spaces">    </code> <code class="js keyword">this</code> <code class="js plain">.setCapture && </code> <code class="js keyword">this</code> <code class="js plain">.setCapture();</code> </div> <div class="line number98 index97 alt1"> <code class="js spaces">    </code> <code class="js keyword">return</code> <code class="js keyword">false</code> </div> <div class="line number99 index98 alt2"> <code class="js spaces">  </code> <code class="js plain">};  </code> </div> <div class="line number100 index99 alt1"> <code class="js spaces">  </code> <code class="js comments">//最大化按钮</code> </div> <div class="line number101 index100 alt2"> <code class="js spaces">  </code> <code class="js plain">oMax.onclick = </code> <code class="js keyword">function</code> <code class="js plain">()</code> </div> <div class="line number102 index101 alt1"> <code class="js spaces">  </code> <code class="js plain">{</code> </div> <div class="line number103 index102 alt2"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.top = oDrag.style.left = 0;</code> </div> <div class="line number104 index103 alt1"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.width = document.documentElement.clientWidth - 2 + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number105 index104 alt2"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.height = document.documentElement.clientHeight - 2 + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number106 index105 alt1"> <code class="js spaces">    </code> <code class="js keyword">this</code> <code class="js plain">.style.display = </code> <code class="js string">"none"</code> <code class="js plain">;</code> </div> <div class="line number107 index106 alt2"> <code class="js spaces">    </code> <code class="js plain">oRevert.style.display = </code> <code class="js string">"block"</code> <code class="js plain">;</code> </div> <div class="line number108 index107 alt1"> <code class="js spaces">  </code> <code class="js plain">};</code> </div> <div class="line number109 index108 alt2"> <code class="js spaces">  </code> <code class="js comments">//还原按钮</code> </div> <div class="line number110 index109 alt1"> <code class="js spaces">  </code> <code class="js plain">oRevert.onclick = </code> <code class="js keyword">function</code> <code class="js plain">()</code> </div> <div class="line number111 index110 alt2"> <code class="js spaces">  </code> <code class="js plain">{    </code> </div> <div class="line number112 index111 alt1"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.width = dragMinWidth + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number113 index112 alt2"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.height = dragMinHeight + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number114 index113 alt1"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number115 index114 alt2"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number116 index115 alt1"> <code class="js spaces">    </code> <code class="js keyword">this</code> <code class="js plain">.style.display = </code> <code class="js string">"none"</code> <code class="js plain">;</code> </div> <div class="line number117 index116 alt2"> <code class="js spaces">    </code> <code class="js plain">oMax.style.display = </code> <code class="js string">"block"</code> <code class="js plain">;</code> </div> <div class="line number118 index117 alt1"> <code class="js spaces">  </code> <code class="js plain">};</code> </div> <div class="line number119 index118 alt2"> <code class="js spaces">  </code> <code class="js comments">//最小化按钮</code> </div> <div class="line number120 index119 alt1"> <code class="js spaces">  </code> <code class="js plain">oMin.onclick = oClose.onclick = </code> <code class="js keyword">function</code> <code class="js plain">()</code> </div> <div class="line number121 index120 alt2"> <code class="js spaces">  </code> <code class="js plain">{</code> </div> <div class="line number122 index121 alt1"> <code class="js spaces">    </code> <code class="js plain">oDrag.style.display = </code> <code class="js string">"none"</code> <code class="js plain">;</code> </div> <div class="line number123 index122 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">oA = document.createElement(</code> <code class="js string">"a"</code> <code class="js plain">);</code> </div> <div class="line number124 index123 alt1"> <code class="js spaces">    </code> <code class="js plain">oA.className = </code> <code class="js string">"open"</code> <code class="js plain">;</code> </div> <div class="line number125 index124 alt2"> <code class="js spaces">    </code> <code class="js plain">oA.href = </code> <code class="js string">"javascript:;"</code> <code class="js plain">;</code> </div> <div class="line number126 index125 alt1"> <code class="js spaces">    </code> <code class="js plain">oA.title = </code> <code class="js string">"还原"</code> <code class="js plain">;</code> </div> <div class="line number127 index126 alt2"> <code class="js spaces">    </code> <code class="js plain">document.body.appendChild(oA);</code> </div> <div class="line number128 index127 alt1"> <code class="js spaces">    </code> <code class="js plain">oA.onclick = </code> <code class="js keyword">function</code> <code class="js plain">()</code> </div> <div class="line number129 index128 alt2"> <code class="js spaces">    </code> <code class="js plain">{</code> </div> <div class="line number130 index129 alt1"> <code class="js spaces">      </code> <code class="js plain">oDrag.style.display = </code> <code class="js string">"block"</code> <code class="js plain">;</code> </div> <div class="line number131 index130 alt2"> <code class="js spaces">      </code> <code class="js plain">document.body.removeChild(</code> <code class="js keyword">this</code> <code class="js plain">);</code> </div> <div class="line number132 index131 alt1"> <code class="js spaces">      </code> <code class="js keyword">this</code> <code class="js plain">.onclick = </code> <code class="js keyword">null</code> <code class="js plain">;</code> </div> <div class="line number133 index132 alt2"> <code class="js spaces">    </code> <code class="js plain">};</code> </div> <div class="line number134 index133 alt1"> <code class="js spaces">  </code> <code class="js plain">};</code> </div> <div class="line number135 index134 alt2"> <code class="js spaces">  </code> <code class="js comments">//阻止冒泡</code> </div> <div class="line number136 index135 alt1"> <code class="js spaces">  </code> <code class="js plain">oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = </code> <code class="js keyword">function</code> <code class="js plain">(event)</code> </div> <div class="line number137 index136 alt2"> <code class="js spaces">  </code> <code class="js plain">{</code> </div> <div class="line number138 index137 alt1"> <code class="js spaces">    </code> <code class="js keyword">this</code> <code class="js plain">.onfocus = </code> <code class="js keyword">function</code> <code class="js plain">() {</code> <code class="js keyword">this</code> <code class="js plain">.blur()};</code> </div> <div class="line number139 index138 alt2"> <code class="js spaces">    </code> <code class="js plain">(event || window.event).cancelBubble = </code> <code class="js keyword">true</code>  </div> <div class="line number140 index139 alt1"> <code class="js spaces">  </code> <code class="js plain">};</code> </div> <div class="line number141 index140 alt2"> <code class="js plain">}</code> </div> <div class="line number142 index141 alt1"> <code class="js comments">/*-------------------------- +</code> </div> <div class="line number143 index142 alt2"> <code class="js spaces"> </code> <code class="js comments">改变大小函数</code> </div> <div class="line number144 index143 alt1"> <code class="js spaces"> </code> <code class="js comments">+-------------------------- */</code> </div> <div class="line number145 index144 alt2"> <code class="js keyword">function</code> <code class="js plain">resize(oParent, handle, isLeft, isTop, lockX, lockY)</code> </div> <div class="line number146 index145 alt1"> <code class="js plain">{</code> </div> <div class="line number147 index146 alt2"> <code class="js spaces">  </code> <code class="js plain">handle.onmousedown = </code> <code class="js keyword">function</code> <code class="js plain">(event)</code> </div> <div class="line number148 index147 alt1"> <code class="js spaces">  </code> <code class="js plain">{</code> </div> <div class="line number149 index148 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">event = event || window.event;</code> </div> <div class="line number150 index149 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">disX = event.clientX - handle.offsetLeft;</code> </div> <div class="line number151 index150 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">disY = event.clientY - handle.offsetTop;  </code> </div> <div class="line number152 index151 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">iParentTop = oParent.offsetTop;</code> </div> <div class="line number153 index152 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">iParentLeft = oParent.offsetLeft;</code> </div> <div class="line number154 index153 alt1"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">iParentWidth = oParent.offsetWidth;</code> </div> <div class="line number155 index154 alt2"> <code class="js spaces">    </code> <code class="js keyword">var</code> <code class="js plain">iParentHeight = oParent.offsetHeight;</code> </div> <div class="line number156 index155 alt1"> <code class="js spaces">    </code> <code class="js plain">document.onmousemove = </code> <code class="js keyword">function</code> <code class="js plain">(event)</code> </div> <div class="line number157 index156 alt2"> <code class="js spaces">    </code> <code class="js plain">{</code> </div> <div class="line number158 index157 alt1"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">event = event || window.event;</code> </div> <div class="line number159 index158 alt2"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">iL = event.clientX - disX;</code> </div> <div class="line number160 index159 alt1"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">iT = event.clientY - disY;</code> </div> <div class="line number161 index160 alt2"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;</code> </div> <div class="line number162 index161 alt1"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;          </code> <code class="js keyword">var</code> <code class="js plain">iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;</code> </div> <div class="line number163 index162 alt2"> <code class="js spaces">      </code> <code class="js keyword">var</code> <code class="js plain">iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;</code> </div> <div class="line number164 index163 alt1"> <code class="js spaces">      </code> <code class="js plain">isLeft && (oParent.style.left = iParentLeft + iL + </code> <code class="js string">"px"</code> <code class="js plain">);</code> </div> <div class="line number165 index164 alt2"> <code class="js spaces">      </code> <code class="js plain">isTop && (oParent.style.top = iParentTop + iT + </code> <code class="js string">"px"</code> <code class="js plain">);</code> </div> <div class="line number166 index165 alt1"> <code class="js spaces">      </code> <code class="js plain">iW < dragMinWidth && (iW = dragMinWidth);</code> </div> <div class="line number167 index166 alt2"> <code class="js spaces">      </code> <code class="js plain">iW > maxW && (iW = maxW);</code> </div> <div class="line number168 index167 alt1"> <code class="js spaces">      </code> <code class="js plain">lockX || (oParent.style.width = iW + </code> <code class="js string">"px"</code> <code class="js plain">);</code> </div> <div class="line number169 index168 alt2"> <code class="js spaces">      </code> <code class="js plain">iH < dragMinHeight && (iH = dragMinHeight);</code> </div> <div class="line number170 index169 alt1"> <code class="js spaces">      </code> <code class="js plain">iH > maxH && (iH = maxH);</code> </div> <div class="line number171 index170 alt2"> <code class="js spaces">      </code> <code class="js plain">lockY || (oParent.style.height = iH + </code> <code class="js string">"px"</code> <code class="js plain">);</code> </div> <div class="line number172 index171 alt1"> <code class="js spaces">      </code> <code class="js keyword">if</code> <code class="js plain">((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = </code> <code class="js keyword">null</code> <code class="js plain">;</code> </div> <div class="line number173 index172 alt2"> <code class="js spaces">      </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;  </code> </div> <div class="line number174 index173 alt1"> <code class="js spaces">    </code> <code class="js plain">};</code> </div> <div class="line number175 index174 alt2"> <code class="js spaces">    </code> <code class="js plain">document.onmouseup = </code> <code class="js keyword">function</code> <code class="js plain">()</code> </div> <div class="line number176 index175 alt1"> <code class="js spaces">    </code> <code class="js plain">{</code> </div> <div class="line number177 index176 alt2"> <code class="js spaces">      </code> <code class="js plain">document.onmousemove = </code> <code class="js keyword">null</code> <code class="js plain">;</code> </div> <div class="line number178 index177 alt1"> <code class="js spaces">      </code> <code class="js plain">document.onmouseup = </code> <code class="js keyword">null</code> <code class="js plain">;</code> </div> <div class="line number179 index178 alt2"> <code class="js spaces">    </code> <code class="js plain">};</code> </div> <div class="line number180 index179 alt1"> <code class="js spaces">    </code> <code class="js keyword">return</code> <code class="js keyword">false</code> <code class="js plain">;</code> </div> <div class="line number181 index180 alt2"> <code class="js spaces">  </code> <code class="js plain">}</code> </div> <div class="line number182 index181 alt1"> <code class="js plain">};</code> </div> <div class="line number183 index182 alt2"> <code class="js plain">window.onload = window.onresize = </code> <code class="js keyword">function</code> <code class="js plain">()</code> </div> <div class="line number184 index183 alt1"> <code class="js plain">{</code> </div> <div class="line number185 index184 alt2"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oDrag = document.getElementById(</code> <code class="js string">"drag"</code> <code class="js plain">);</code> </div> <div class="line number186 index185 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oTitle = get.byClass(</code> <code class="js string">"title"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number187 index186 alt2"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oL = get.byClass(</code> <code class="js string">"resizeL"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number188 index187 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oT = get.byClass(</code> <code class="js string">"resizeT"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number189 index188 alt2"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oR = get.byClass(</code> <code class="js string">"resizeR"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number190 index189 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oB = get.byClass(</code> <code class="js string">"resizeB"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number191 index190 alt2"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oLT = get.byClass(</code> <code class="js string">"resizeLT"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number192 index191 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oTR = get.byClass(</code> <code class="js string">"resizeTR"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number193 index192 alt2"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oBR = get.byClass(</code> <code class="js string">"resizeBR"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number194 index193 alt1"> <code class="js spaces">  </code> <code class="js keyword">var</code> <code class="js plain">oLB = get.byClass(</code> <code class="js string">"resizeLB"</code> <code class="js plain">, oDrag)[0];</code> </div> <div class="line number195 index194 alt2"> <code class="js spaces">  </code> <code class="js plain">drag(oDrag, oTitle);</code> </div> <div class="line number196 index195 alt1"> <code class="js spaces">  </code> <code class="js comments">//四角</code> </div> <div class="line number197 index196 alt2"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oLT, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">);</code> </div> <div class="line number198 index197 alt1"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oTR, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">);</code> </div> <div class="line number199 index198 alt2"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oBR, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">);</code> </div> <div class="line number200 index199 alt1"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oLB, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">);</code> </div> <div class="line number201 index200 alt2"> <code class="js spaces">  </code> <code class="js comments">//四边</code> </div> <div class="line number202 index201 alt1"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oL, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">true</code> <code class="js plain">);</code> </div> <div class="line number203 index202 alt2"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oT, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">);</code> </div> <div class="line number204 index203 alt1"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oR, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">true</code> <code class="js plain">);</code> </div> <div class="line number205 index204 alt2"> <code class="js spaces">  </code> <code class="js plain">resize(oDrag, oB, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">, </code> <code class="js keyword">true</code> <code class="js plain">, </code> <code class="js keyword">false</code> <code class="js plain">);</code> </div> <div class="line number206 index205 alt1"> <code class="js spaces">  </code> <code class="js plain">oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number207 index206 alt2"> <code class="js spaces">  </code> <code class="js plain">oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + </code> <code class="js string">"px"</code> <code class="js plain">;</code> </div> <div class="line number208 index207 alt1"> <code class="js plain">}</code> </div> <div class="line number209 index208 alt2"> <code class="js plain">


"drag" >   "title" >    这是一个可以拖动的窗口        "min" href= "javascript:;" title= "最小化" >     "max" href= "javascript:;" title= "最大化" >     "revert" href= "javascript:;" title= "还原" >     "close" href= "javascript:;" title= "关闭" >        "resizeL" >   "resizeT" >   "resizeR" >   "resizeB" >   "resizeLT" >   "resizeTR" >   "resizeBR" >   "resizeLB" >   "content" >    ① 窗口可以拖动；    ② 窗口可以通过八个方向改变大小；    ③ 窗口可以最小化、最大化、还原、关闭；    ④ 限制窗口最小宽度/高度。