js实现拖动左侧菜单栏改变宽度``` js实现拖动左侧菜单栏改变宽度 js实现拖动左侧菜单栏改变宽度 js实现拖动左侧菜

实现代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>js实现左侧菜单拖动改变宽度</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    /* css样式不建议使用id选择器，此处为方便暂时使用, 请见谅 */
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      text-align: center;
    }

    body {
      position: relative;
    }

    .top {
      width: 100%;
      height: 88px;
      background-color: #ccc;
    }

    #left {
      position: absolute;
      top: 88px;
      right: 0;
      bottom: 0;
      left: 0;
      width: 220px;
    }

    #menu {
      width: 100%;
      height: 100%;
    }

    #drap-line {
      position: absolute;
      top: 0;
      right: 0;
      width: 4px;
      height: 100%;
      background-color: #999;
      cursor: e-resize;
    }

    #right {
      position: absolute;
      top: 88px;
      right: 0;
      bottom: 0;
      left: 220px;
    }
  </style>
</head>

<body>
  <div class="top">顶部导航</div>
  <div id="left">
    <div id="menu">
      <span>待拖拽的div</span>
    </div>
    <div id="drap-line"></div>
  </div>
  <div id="right">
    右边的div
  </div>
  <script>
    //获取dom函数
    function $(id) {
      return document.getElementById(id)
    }

    //设置最大/最小宽度
    var max_width = 400,
      min_width = 200;

    //获取dom
    var drapLine = $('drap-line'),
      left = $('left'),
      right = $('right');

    //记录鼠标相对left盒子x轴位置
    var mouse_x = 0;

    //鼠标移动事件
    function mouseMove(e) {
      var e = e || window.event;
      var left_width = e.clientX - mouse_x;
      left_width = left_width < min_width ? min_width : left_width;
      left_width = left_width > max_width ? max_width : left_width;
      left.style.width = left_width + 'px';
      right.style.left = left_width + 'px';
    }
    //终止事件
    function mouseUp() {
      document.onmousemove = null;
      document.onmouseup = null;
      //localStorage设置
      localStorage.setItem('sliderWidth', left.style.width)
    }

    window.onload = function () {
      //localStorage读取
      var history_width = localStorage.getItem('sliderWidth');
      if (history_width) {
        left.style.width = history_width;
        right.style.left = history_width;
      }
      //绑定鼠标按下事件
      drapLine.onmousedown = function (e) {
        var e = e || window.event;
        //阻止默认事件
        e.preventDefault();
        mouse_x = e.clientX - left.offsetWidth;
        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;
      }
    }
  </script>
</body>

</html>