jQuery拖動調整左右兩列寬度

admin發表於2018-11-24
jQuery

本章節分享一段程式碼例項，它實現了使用滑鼠左右拖動就可以調整兩列寬度的功能。

這在很多效果中都有應用，下面就通過程式碼例項詳細介紹一下它的實現過程。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
html, body, div {
  margin: 0;
  padding: 0;
  border: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
}
.gf_s {
  float:left;
  width:4px;
  cursor:e-resize;
  background-color:#fff;
  border:#99BBE8 1px solid;
}
.gf_s_g {
  float: left;
  width: 4px;
  display: none;
  cursor: e-resize;
  position: absolute;
  background-color: #F0F0F0;
  border: #99BBE8 1px solid;
  filter: alpha(opacity=60);
  opacity: 0.6;
  opacity: 0.6;
  z-index: 1000;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
var $sliderMoving = false;
function mousePosition(ev) {
  if (!ev) ev = window.event;
  if (ev.pageX || ev.pageY) {
    return { x: ev.pageX, y: ev.pageY };
  }
  return {
    x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
    y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
  };
};
function getElCoordinate(dom) {
  var t = dom.offsetTop;
  var l = dom.offsetLeft;
  dom = dom.offsetParent;
  while (dom) {
    t += dom.offsetTop;
    l += dom.offsetLeft;
    dom = dom.offsetParent;
  };
  return { top: t, left: l };
};
 
function sliderGhostMoving(e) {
  $("#divSG").css({ left: mousePosition(e).x , display: "block" });
};
function sliderHorizontalMove(e) {
  var lWidth = getElCoordinate($("#divSG")[0]).left;
  var rWidth = $(window).width() - lWidth - 6;
  $("#divLeft").css("width", lWidth + "px");
  $("#divRight").css("width", rWidth + "px");
  $("#divSG").css("display", "none");
};
 
function reinitSize() {
  var width = $(window).width() - 6;
  var height = $(window).height();
  $("#divLeft").css({ height: height + "px", width: width * 0.75 + "px" });
  $("#divS").css({ height: height - 2 + "px", width: "4px" });
  $("#divSG").css({ height: height - 2 + "px", width: "4px" });
  $("#divRight").css({ height: height + "px", width: width * 0.25 + "px" });
}
 
$(document).ready(function () {
  reinitSize();
  $("#divS").on("mousedown", function (e) {
    $sliderMoving = true;
    $("divP").css("cursor", "e-resize");
  });
 
  $("#divP").on("mousemove", function (e) {
    if ($sliderMoving) {
      sliderGhostMoving(e);
    }
  });
 
  $("#divP").on("mouseup", function (e) {
    if ($sliderMoving) {
      $sliderMoving = false;
      sliderHorizontalMove(e);
      $("#divP").css("cursor", "default");
    }
  });
});
$(window).resize(function () {
  reinitSize();
});
</script>
</head>
<body>
<div id="divP" style="width:100%; height:100%;">
  <div id="divLeft" style="background-color:green;float:left;"></div>
  <div id="divS" class="gf_s" style="float:left;"></div>
  <div id="divSG" class="gf_s_g" style="float:left;"></div>
  <div id="divRight" style="background-color:blue;float:left;"></div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var $sliderMoving = false，宣告一個變數並賦值為false，作用一個標識，用來說明是否可以拖動調整寬度。

（2）.function mousePosition(ev) {  if (!ev) ev = window.event;

  if (ev.pageX || ev.pageY) {

    return { x: ev.pageX, y: ev.pageY };

  }

  return {

    x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,

    y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop

  };

}，此方法可以獲取滑鼠在文件中的座標，具體可以參閱js獲取滑鼠在文件中的座標一章節。

（3）.function getElCoordinate(dom) {

  var t = dom.offsetTop;

  var l = dom.offsetLeft;

  dom = dom.offsetParent;

  while (dom) {

    t += dom.offsetTop;

    l += dom.offsetLeft;

    dom = dom.offsetParent;

  };

  return { top: t, left: l };

},此函式用來獲取一個元素在body中的座標，由於已經設定body的外邊距為0，那麼就是獲取元素再文件中座標。

具體可以參閱獲取元素在文件中座標一章節。

（4）.function sliderGhostMoving(e) {

  $("#divSG").css({ left: mousePosition(e).x - 2, display: "block" });

},設定拖動的時候淺色的分隔條的座標，並設定它顯示。

（5）.function sliderHorizontalMove(e) {}，此方法實現設定左右兩欄尺寸的功能。

（6）.var lWidth = getElCoordinate($("#divSG")[0]).left，獲取分隔條距離文件左側的距離，其實也就是左欄的尺寸。

（7）.var rWidth = $(window).width() - lWidth - 6，獲取遊覽的尺寸，減6是減去分隔欄的width和border。

（8）.$("#divLeft").css("width", lWidth + "px")，設定左欄寬度。

（9）.$("#divRight").css("width", rWidth + "px")，設定右欄的寬度。

（10）.$("#divSG").css("display", "none")，設定那個拖動的時候顯示的半透明的分隔欄隱藏。

（11）.function reinitSize() {}，當調整視窗尺寸的時候調整左右兩欄的尺寸。

（12）.var width = $(window).width() - 6，獲取除去分隔條之外的視窗寬度。

（13）.var height = $(window).height()，獲取視窗的高度。

（14）.$("#divLeft").css({ height: height + "px", width: width * 0.75 + "px" })，設定左欄的尺寸。

（15）.$("#divS").css({ height: height - 2 + "px", width: "4px" })，設定分隔欄的高度和寬度。

（16）. $("#divSG").css({ height: height - 2 + "px", width: "4px" })，設定拖動時候出現的分隔欄的高度和寬度。

（17）.$("#divRight").css({ height: height + "px", width: width * 0.25 + "px" }),設定右欄的尺寸。

（18）.$(document).ready(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（19）.reinitSize()，先初始化一下視窗的尺寸。

（20）.$("#divS").on("mousedown", function (e) {

  $sliderMoving = true;

  $("divP").css("cursor", "e-resize");

})，為分隔條註冊mousedown事件處理函式。

當滑鼠按下的時候，將$sliderMoving設定為true，表示是可以拖動調整的。

同事設定滑鼠的指標的形狀。

（21）.$("#divP").on("mousemove", function (e) {

  if ($sliderMoving) {

    sliderGhostMoving(e);

  }

})，為分隔條註冊mousemove事件處理函式。

二.相關閱讀:

（1）.on()可以參閱jquery on()一章節。

（2）.resize可以參閱jQuery resize事件一章節。

（3）.css()可以參閱jQuery css()方法一章節。

相關文章