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

2026-04-01 16:14:55

1、新建html文档。

</div>

① 窗口可以拖动；<br />

② 窗口可以通过八个方向改变大小；<br />

③ 窗口可以最小化、最大化、还原、关闭；<br />

④ 限制窗口最小宽度/高度。

</div>

3、书写css代码。

body, div, h2 { margin: 0; padding: 0; }

body { 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、查看效果。