怎么样通过JS实现窗口拖拽效果?

怎么样通过JS实现窗口拖拽效果?

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

这是一款漂亮的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>

希望本文所述对大家的JavaScript程序设计有所帮助。