js窗口拖拽改变大小,最小化,最大化,还原,关闭

1、新建html文档。

2、书写hmtl代艨位雅剖码。<div id="drag"> <div 艘早祓胂class="title"> <h2>这是一个可以拖动的窗口</h2> <div> <a class="min" href="#" title="最小化"></a> <a class="max" href="#" title="最大化"></a> <a class="revert" href="#" title="还原"></a> <a class="close" href="#" title="关闭"></a> </div> </div> <div class="resizeL"></div> <div class="resizeT"></div> <div class="resizeR"></div> <div class="resizeB"></div> <div class="resizeLT"></div> <div class="resizeTR"></div> <div class="resizeBR"></div> <div class="resizeLB"></div> <div class="content"> ① 窗口可以拖动；<br /> ② 窗口可以通过八个方向改变大小；<br /> ③ 窗口可以最小化、最大化、还原、关闭；<br /> ④ 限制窗口最小宽度/高度。 </div> </div>

3、书写css代码。body, div, h2 { margin: 0; padding: 0; }bod烤恤鹇灭y { background: url(../images/bg.jpg); font: 12px/1.5 \5fae\8f6f\96c5\9ed1; color: #333; }#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; }#drag .title { position: relative; height: 27px; margin: 5px; }#drag .title h2 { font-size: 14px; height: 27px; line-height: 24px; border-bottom: 1px solid #A1B4B0; }#drag .title div { position: absolute; height: 19px; top: 2px; right: 0; }#drag .title a, a.open { float: left; width: 21px; height: 19px; display: block; margin-left: 5px; background: url(../images/tool.png) no-repeat; }a.open { position: absolute; top: 10px; left: 50%; margin-left: -10px; background-position: 0 0; }a.open:hover { background-position: 0 -29px; }#drag .title a.min { background-position: -29px 0; }#drag .title a.min:hover { background-position: -29px -29px; }#drag .title a.max { background-position: -60px 0; }#drag .title a.max:hover { background-position: -60px -29px; }#drag .title a.revert { background-position: -149px 0; display: none; }#drag .title a.revert:hover { background-position: -149px -29px; }#drag .title a.close { background-position: -89px 0; }#drag .title a.close:hover { background-position: -89px -29px; }#drag .content { overflow: auto; margin: 0 5px; }#drag .resizeBR { position: absolute; width: 14px; height: 14px; right: 0; bottom: 0; overflow: hidden; cursor: nw-resize; background: url(../images/resize.png) no-repeat; }#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); }#drag .resizeL, #drag .resizeR { top: 0; width: 5px; height: 100%; cursor: w-resize; }#drag .resizeR { right: 0; }#drag .resizeT, #drag .resizeB { width: 100%; height: 5px; cursor: n-resize; }#drag .resizeT { top: 0; }#drag .resizeB { bottom: 0; }#drag .resizeLT, #drag .resizeTR, #drag .resizeLB { width: 8px; height: 8px; background: #FF0; }#drag .resizeLT { top: 0; left: 0; cursor: nw-resize; }#drag .resizeTR { top: 0; right: 0; cursor: ne-resize; }#drag .resizeLB { left: 0; bottom: 0; cursor: ne-resize; }

4、书写并添加js代码。var get = { byId: function(id) { return typeof id === "string" ? document.getElementById(id) : id }, byClass: function(sClass, oParent) { var aClass = []; var reClass = new RegExp("(^| )" + sClass + "( |$)"); var aElem = this.byTagName("*", oParent); for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]); return aClass }, byTagName: function(elem, obj) { return (obj || document).getElementsByTagName(elem) }};var dragMinWidth = 250;var dragMinHeight = 124;

5、代码整体结构。

6、查看效果。