js實現的拖動改變視窗大小功能

antzone發表於2017-04-06
JS

本章節分享一段程式碼例項，它實現了通過拖動調整視窗的大小，當然也有其他功能，比如拖動視窗移動並且能夠限制移動的範圍等，感興趣的朋友可以借鑑參考一下，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<style type="text/css">
body, div, h2{
  margin:0;
  padding:0;
}
body{
  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(/jscss/demoimg/201205/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(/jscss/demoimg/201205/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>

相關文章