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

最新推荐文章于 2022-07-12 00:22:29 发布

转载最新推荐文章于 2022-07-12 00:22:29 发布 · 1.6k 阅读

文章标签：

#javascript #前端 #xhtml #ViewUI

本文介绍了一款使用JavaScript实现的窗口拖拽效果，包括拖动、改变大小、最小化、最大化、还原和关闭等功能。提供了完整的代码示例，并展示了如何通过鼠标操作调整窗口的尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

特点：

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

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

   <!DOCTYPE html PUBLIC 
   "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
   >
  
   <html xmlns=
   "http://www.w3.org/1999/xhtml"
   >
  
   <head>
  
   <meta http-equiv=
   "Content-Type" 
   content=
   "text/html; charset=utf-8" 
   />
  
   <title>窗口拖拽（改变大小/最小化/最大化/还原/关闭）</title>
  
   <style type=
   "text/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;}
  
   </style>
  
   <script type=
   "text/javascript"
   > 
  
   /*-------------------------- +
  
   获取id, class, tagName
  
   +-------------------------- */
  
   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;
  
   /*-------------------------- +
  
   拖拽函数
  
   +-------------------------- */
  
   function 
   drag(oDrag, handle)
  
   {
  
   var 
   disX = dixY = 0;
  
   var 
   oMin = get.byClass(
   "min"
   , oDrag)[0];
  
   var 
   oMax = get.byClass(
   "max"
   , oDrag)[0];
  
   var 
   oRevert = get.byClass(
   "revert"
   , oDrag)[0];
  
   var 
   oClose = get.byClass(
   "close"
   , oDrag)[0];
  
   handle = handle || oDrag;
  
   handle.style.cursor = 
   "move"
   ;
  
   handle.onmousedown = 
   function 
   (event)
  
   {
  
   var 
   event = event || window.event;
  
   disX = event.clientX - oDrag.offsetLeft;
  
   disY = event.clientY - oDrag.offsetTop;
  
   document.onmousemove = 
   function 
   (event)
  
   {
  
   var 
   event = event || window.event;
  
   var 
   iL = event.clientX - disX;
  
   var 
   iT = event.clientY - disY;
  
   var 
   maxL = document.documentElement.clientWidth - oDrag.offsetWidth;
  
   var 
   maxT = document.documentElement.clientHeight - oDrag.offsetHeight;
  
   iL <= 0 && (iL = 0);
  
   iT <= 0 && (iT = 0);
  
   iL >= maxL && (iL = maxL);
  
   iT >= maxT && (iT = maxT);
  
   oDrag.style.left = iL + 
   "px"
   ;
  
   oDrag.style.top = iT + 
   "px"
   ;
  
   return 
   false
  
   };
  
   document.onmouseup = 
   function 
   ()
  
   {
  
   document.onmousemove = 
   null
   ;
  
   document.onmouseup = 
   null
   ;
  
   this
   .releaseCapture && 
   this
   .releaseCapture()
  
   };
  
   this
   .setCapture && 
   this
   .setCapture();
  
   return 
   false
  
   };  
  
   //最大化按钮
  
   oMax.onclick = 
   function 
   ()
  
   {
  
   oDrag.style.top = oDrag.style.left = 0;
  
   oDrag.style.width = document.documentElement.clientWidth - 2 + 
   "px"
   ;
  
   oDrag.style.height = document.documentElement.clientHeight - 2 + 
   "px"
   ;
  
   this
   .style.display = 
   "none"
   ;
  
   oRevert.style.display = 
   "block"
   ;
  
   };
  
   //还原按钮
  
   oRevert.onclick = 
   function 
   ()
  
   {    
  
   oDrag.style.width = dragMinWidth + 
   "px"
   ;
  
   oDrag.style.height = dragMinHeight + 
   "px"
   ;
  
   oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + 
   "px"
   ;
  
   oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + 
   "px"
   ;
  
   this
   .style.display = 
   "none"
   ;
  
   oMax.style.display = 
   "block"
   ;
  
   };
  
   //最小化按钮
  
   oMin.onclick = oClose.onclick = 
   function 
   ()
  
   {
  
   oDrag.style.display = 
   "none"
   ;
  
   var 
   oA = document.createElement(
   "a"
   );
  
   oA.className = 
   "open"
   ;
  
   oA.href = 
   "javascript:;"
   ;
  
   oA.title = 
   "还原"
   ;
  
   document.body.appendChild(oA);
  
   oA.onclick = 
   function 
   ()
  
   {
  
   oDrag.style.display = 
   "block"
   ;
  
   document.body.removeChild(
   this
   );
  
   this
   .onclick = 
   null
   ;
  
   };
  
   };
  
   //阻止冒泡
  
   oMin.onmousedown = oMax.onmousedown = oClose.onmousedown = 
   function 
   (event)
  
   {
  
   this
   .onfocus = 
   function 
   () {
   this
   .blur()};
  
   (event || window.event).cancelBubble = 
   true 
  
   };
  
   }
  
   /*-------------------------- +
  
   改变大小函数
  
   +-------------------------- */
  
   function 
   resize(oParent, handle, isLeft, isTop, lockX, lockY)
  
   {
  
   handle.onmousedown = 
   function 
   (event)
  
   {
  
   var 
   event = event || window.event;
  
   var 
   disX = event.clientX - handle.offsetLeft;
  
   var 
   disY = event.clientY - handle.offsetTop;  
  
   var 
   iParentTop = oParent.offsetTop;
  
   var 
   iParentLeft = oParent.offsetLeft;
  
   var 
   iParentWidth = oParent.offsetWidth;
  
   var 
   iParentHeight = oParent.offsetHeight;
  
   document.onmousemove = 
   function 
   (event)
  
   {
  
   var 
   event = event || window.event;
  
   var 
   iL = event.clientX - disX;
  
   var 
   iT = event.clientY - disY;
  
   var 
   maxW = document.documentElement.clientWidth - oParent.offsetLeft - 2;
  
   var 
   maxH = document.documentElement.clientHeight - oParent.offsetTop - 2;          
   var 
   iW = isLeft ? iParentWidth - iL : handle.offsetWidth + iL;
  
   var 
   iH = isTop ? iParentHeight - iT : handle.offsetHeight + iT;
  
   isLeft && (oParent.style.left = iParentLeft + iL + 
   "px"
   );
  
   isTop && (oParent.style.top = iParentTop + iT + 
   "px"
   );
  
   iW < dragMinWidth && (iW = dragMinWidth);
  
   iW > maxW && (iW = maxW);
  
   lockX || (oParent.style.width = iW + 
   "px"
   );
  
   iH < dragMinHeight && (iH = dragMinHeight);
  
   iH > maxH && (iH = maxH);
  
   lockY || (oParent.style.height = iH + 
   "px"
   );
  
   if
   ((isLeft && iW == dragMinWidth) || (isTop && iH == dragMinHeight)) document.onmousemove = 
   null
   ;
  
   return 
   false
   ;  
  
   };
  
   document.onmouseup = 
   function 
   ()
  
   {
  
   document.onmousemove = 
   null
   ;
  
   document.onmouseup = 
   null
   ;
  
   };
  
   return 
   false
   ;
  
   }
  
   };
  
   window.onload = window.onresize = 
   function 
   ()
  
   {
  
   var 
   oDrag = document.getElementById(
   "drag"
   );
  
   var 
   oTitle = get.byClass(
   "title"
   , oDrag)[0];
  
   var 
   oL = get.byClass(
   "resizeL"
   , oDrag)[0];
  
   var 
   oT = get.byClass(
   "resizeT"
   , oDrag)[0];
  
   var 
   oR = get.byClass(
   "resizeR"
   , oDrag)[0];
  
   var 
   oB = get.byClass(
   "resizeB"
   , oDrag)[0];
  
   var 
   oLT = get.byClass(
   "resizeLT"
   , oDrag)[0];
  
   var 
   oTR = get.byClass(
   "resizeTR"
   , oDrag)[0];
  
   var 
   oBR = get.byClass(
   "resizeBR"
   , oDrag)[0];
  
   var 
   oLB = get.byClass(
   "resizeLB"
   , oDrag)[0];
  
   drag(oDrag, oTitle);
  
   //四角
  
   resize(oDrag, oLT, 
   true
   , 
   true
   , 
   false
   , 
   false
   );
  
   resize(oDrag, oTR, 
   false
   , 
   true
   , 
   false
   , 
   false
   );
  
   resize(oDrag, oBR, 
   false
   , 
   false
   , 
   false
   , 
   false
   );
  
   resize(oDrag, oLB, 
   true
   , 
   false
   , 
   false
   , 
   false
   );
  
   //四边
  
   resize(oDrag, oL, 
   true
   , 
   false
   , 
   false
   , 
   true
   );
  
   resize(oDrag, oT, 
   false
   , 
   true
   , 
   true
   , 
   false
   );
  
   resize(oDrag, oR, 
   false
   , 
   false
   , 
   false
   , 
   true
   );
  
   resize(oDrag, oB, 
   false
   , 
   false
   , 
   true
   , 
   false
   );
  
   oDrag.style.left = (document.documentElement.clientWidth - oDrag.offsetWidth) / 2 + 
   "px"
   ;
  
   oDrag.style.top = (document.documentElement.clientHeight - oDrag.offsetHeight) / 2 + 
   "px"
   ;
  
   }
  
   </script>
  
   </head>
  
   <body>
  
   <div id=
   "drag"
   >
  
   <div class=
   "title"
   >
  
   <h2>这是一个可以拖动的窗口</h2>
  
   <div>
  
   <a class=
   "min" 
   href=
   "javascript:;" 
   title=
   "最小化"
   ></a>
  
   <a class=
   "max" 
   href=
   "javascript:;" 
   title=
   "最大化"
   ></a>
  
   <a class=
   "revert" 
   href=
   "javascript:;" 
   title=
   "还原"
   ></a>
  
   <a class=
   "close" 
   href=
   "javascript:;" 
   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>
  
   </body>
  
   </html>