jQuery實現類似Chrome控制台可拖拽改變寬度的樣式

最近項目進程緊張，沒法再愉快的網上沖浪了

因為項目需要實現一個頁面上可拖拽改變div寬度的功能，類似效果如Chrome的右側調試台樣式：

大概思路為：

1.使用mousemove()方法，將鼠標的位置動態的賦予拖拽層

2.使用mousedown()方法，在鼠標被按下未抬起的過程中執行mousemove()

3.使用mouseup()方法，在鼠標按下並抬起后不執行mousemove()

實現步驟為：

• 先搭好頁面靜態樣式

  //左邊區域
  <div id="main">
      <div id="left"></div>
      <div id="right"></div>
  </div>
  //可拖拽區域,border充當鼠標點擊的區域
  <div id="div">
      <div id="content">可拖拽</div>
      <div id="border"></div>
  </div>
  

  html,
  body {
      padding: 0;
      margin: 0;
      overflow: hidden;
  }
  
  #main {
      display: inline-flex;
      position: absolute;
      z-index: 1;
  }
  
  #left {
      flex: 2;
      height: 100%;
      background-color: cadetblue;
  }
  
  #right {
      flex: 10;
      height: 100%;
      background-color: cornsilk;
  }
  
  #div {
      width: 100px;
      background-color: bisque;
      position: absolute;
      right: 0;
      z-index: 2;
  }
  
  #content {
      padding-left: 5px;
  }
  
  #border {
      height: 100%;
      width: 5px;
      cursor: e-resize;
      background-color: black;
      position: absolute;
      top: 0;
      left: 0;
  }
  

• 再寫js代碼

  //給div的初始賦值
  var height = window.innerHeight;
  var width = window.innerWidth;
  $('#div').css({ 'width': width * 0.12, 'height': height })
  $('#main').css({ 'width': width, 'height': height })
  
  move();
  //動態賦值函數
  function move() {
      var _move = false;  //賦值標志，為真時給拖拽層賦值
  
      //鼠標按下但未抬起
      $("#border").mousedown(function (e) {
          _move = true;  
      })
  	
      //鼠標移動
      $(document).mousemove(function (e) {
          //標志為真時賦值
          if (_move) {
              //用文檔的可見區域寬減去當前鼠標相對於文檔左邊緣的寬度，得到的值即為拖拽層的寬度
              var x = window.innerWidth - e.pageX;
              //設置拖拽層最小寬度
              if (x <= window.innerWidth * 0.01) {
                  x = window.innerWidth * 0.01;
              }
              // 設置拖拽層最大寬度
              if (x >= window.innerWidth) {
                  x = window.innerWidth;
              }
              //給div設置寬度
              $('#div').css('width', x)
          }
      }).mouseup(function () {
          //鼠標按下並抬起
          _move = false;
      });
  }
  

• 此時，頁面基本上已經可以實現拖拽賦值的效果了，但是我發現在改變瀏覽器大小時，元素的大小並不會隨之改變，而是要刷新后才可以

  

• 這樣非常影響使用感，所有我又調用了window.onresize()方法，在每次窗口被調整大小時給元素重新設置寬高即可

  window.onload = function () {
      setSize();
  }
  
  window.onresize = function () {
      setSize()
  }
  
  function setSize() {
      var height = window.innerHeight;
      var width = window.innerWidth;
      $('#div').css({ 'width': width * 0.12, 'height': height })
      $('#main').css({ 'width': width, 'height': height })
  }
  
  move();
  function move(){
      ...同上
  }
  

  最終效果為：