响应式网页布局：HTML/CSS/JS实现可拖动的侧边栏-CSDN博客

本文链接：https://blog.csdn.net/weixin_44797182/article/details/132744927
在这里插入图片描述
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
</head>

<body>
  <div id="weiMain">
    <div id="weiLeft">
      左侧边栏区域
    </div>
    <div id="weiLeftResize" title="收缩markdown侧边栏">
      <button onclick="leftDragControllerDivVisiable();return false;" class="weiresizeBtn">=</button>
    </div>
    <div id="weiContent">
      <div id="weiMarkdownContent">内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域内容区域</div>
    </div>
    <div id="weiRightResize" title="收缩markdown侧边栏">
      <button onclick="rightDragControllerDivVisiable();return false;" class="weiresizeBtn weiresizeBtnRight">= </button>
    </div>
    <div id="weiRight">
      右侧边栏区域
    </div>
  </div>
</body>

</html>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  :root {
    --leftWidth: 15%;
    --leftBorderRightColor: red;
    --leftResizeWidth: 10px;
    --leftResizeBgHover: aqua;
    --rightWidth: 15%;
    --rightBorderRightColor: red;
    --rightResizeWidth: 10px;
    --rightResizeBgHover: aqua;
  }

  #weiMain {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  #weiMain>div {
    position: absolute;
  }

  #weiLeft {
    width: var(--leftWidth);
    height: 100%;
    left: 0;
    top: 0;
    border-right: 1px solid var(--leftBorderRightColor);
    box-sizing: border-box;
  }

  #weiRight {
    width: var(--rightWidth);
    height: 100%;
    right: 0;
    top: 0;
    border-left: 1px solid var(--rightBorderRightColor);
    box-sizing: border-box;
  }

  #weiLeftResize {
    width: var(--leftResizeWidth);
    height: 100%;
    left: var(--leftWidth);
    top: 0;
    /* background-color: rgb(204, 211, 211); */
    z-index: 999;
  }

  #weiRightResize {
    width: var(--rightResizeWidth);
    height: 100%;
    right: var(--rightWidth);
    top: 0;
    /* background-color: rgb(204, 211, 211); */
    z-index: 999;
  }

  #weiLeftResize:hover,
  #weiRightResize:hover {
    background-color: var(--leftResizeBgHover);
    cursor: col-resize;
  }

  #weiContent {
    width: 100%;
    height: 100%;
    padding-left: calc(var(--leftWidth) + var(--leftResizeWidth));
    padding-right: calc(var(--rightWidth) + var(--rightResizeWidth));
    z-index: -99;
    box-sizing: border-box;
  }

  .weiresizeBtn {
    position: absolute;
    bottom: 0;
    box-sizing: 99999;
    width: 20px;
    height: 20px;
  }
  .weiresizeBtnRight{
   right: 0;
  }
</style>
<script>
  // 左侧拖拽
  function leftDragControllerDiv(main = "#weiMain", sidebar = "#weiLeft", resize = "#weiLeftResize", content = "#weiContent", minleft = 0, minright = 0) {
    // 层次结构：main 》 sidebar = resize = content
    var resize = document.querySelector(resize);         // 拖动条
    var left = document.querySelector(sidebar);          // 侧边栏
    var mid = document.querySelector(content);           // 内容区域
    var box = document.querySelector(main);              // 整个大区域
    // 鼠标按下事件
    resize.onmousedown = function (e) {
      //颜色改变提醒
      // resize.style.background = '#818181';
      var startX = e.clientX;
      resize.left = resize.offsetLeft;
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        var endX = e.clientX;
        var moveLen = resize.left + (endX - startX); // （endx-startx）=移动的距离。resize.left+移动的距离=左边区域最后的宽度
        var maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

        if (moveLen < minleft) moveLen = minleft; // 左边区域的最小宽度为32px
        if (moveLen > maxT - minright) moveLen = maxT - minright; //右边区域最小宽度为150px


        console.log(moveLen);
        left.style.width = moveLen + 'px'; // 设置左侧区域的宽度
        resize.style.left = moveLen + 'px'; // 设置拖动条的位置
        mid.style.paddingLeft = (moveLen + resize.offsetWidth) + 'px'; // 注意加上滚动条的宽度
      };
      // 鼠标松开事件
      document.onmouseup = function (evt) {
        //颜色恢复
        // resize.style.background = '#d6d6d6';
        document.onmousemove = null;
        document.onmouseup = null;
        resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      };
      resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false;
    };
  }
  function leftDragControllerDivVisiable(main = "#weiMain", sidebar = "#weiLeft", resize = "#weiLeftResize", content = "#weiContent", minleft = 0, minright = 0) {
    var resize = document.querySelector(resize);         // 拖动条
    var left = document.querySelector(sidebar);          // 侧边栏
    var mid = document.querySelector(content);           // 内容区域
    var box = document.querySelector(main);              // 整个大区域
    if (resize.left <= minleft) {
      console.log(1);
      const root = document.documentElement;
      const leftWidth = window.getComputedStyle(root).getPropertyValue('--leftWidth');
      left.style.width = leftWidth; // 设置左侧区域的宽度
      resize.style.left = leftWidth; // 设置拖动条的位置
      mid.style.paddingLeft = leftWidth; // 注意加上滚动条的宽度
    } else {
      left.style.width = 0; // 设置左侧区域的宽度
      resize.style.left = 0; // 设置拖动条的位置
      mid.style.paddingLeft = (0 + resize.offsetWidth) + 'px'; // 注意加上滚动条的宽度
    }
  }
  // 右侧拖拽
  function rightDragControllerDiv(main = "#weiMain", sidebar = "#weiRight", resize = "#weiRightResize", content = "#weiContent", minleft = 0, minright = 0) {
    // 层次结构：main 》 sidebar = resize = content
    var right = document.querySelector(sidebar);          // 侧边栏
    var mid = document.querySelector(content);           // 内容区域
    var box = document.querySelector(main);              // 整个大区域
    var resize = document.querySelector(resize);  // 拖动条

    // 鼠标按下事件
    resize.onmousedown = function (e) {
      //颜色改变提醒
      // resize.style.background = '#818181';
      var startX = e.clientX;
      resize.left = resize.offsetLeft;
      // 鼠标拖动事件
      document.onmousemove = function (e) {
        var endX = e.clientX;
        var moveLen = resize.left + (endX - startX); // （endx-startx）=移动的距离。resize.left+移动的距离=左边区域最后的宽度
        var maxT = box.clientWidth - resize.offsetWidth; // 容器宽度 - 左边区域的宽度 = 右边区域的宽度

        if (moveLen < minleft) moveLen = minleft; // 左边区域的最小宽度为32px
        if (moveLen > maxT - minright) moveLen = maxT - minright; //右边区域最小宽度为150px

        resize.style.right = (box.clientWidth - (moveLen + resize.offsetWidth)) + 'px'; // 设置拖动条的位置
        right.style.width = (box.clientWidth - (moveLen + resize.offsetWidth)) + 'px'; // 设置左侧区域的宽度
        mid.style.paddingRight = (box.clientWidth - (moveLen + resize.offsetWidth)) + 'px'; // 注意加上滚动条的宽度

      };
      // 鼠标松开事件
      document.onmouseup = function (evt) {
        //颜色恢复
        // resize.style.background = '#d6d6d6';
        document.onmousemove = null;
        document.onmouseup = null;
        resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
      };
      resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
      return false;
    };

  }
  function rightDragControllerDivVisiable(main = "#weiMain", sidebar = "#weiRight", resize = "#weiRightResize", content = "#weiContent", minleft = 0, minright = 0) {
    // 层次结构：main 》 sidebar = resize = content
    var right = document.querySelector(sidebar);          // 侧边栏
    var mid = document.querySelector(content);           // 内容区域
    var box = document.querySelector(main);              // 整个大区域
    var resize = document.querySelector(resize);  // 拖动条
    if (mid.style.paddingRight == minright + 'px') {
      const root = document.documentElement;
      const rightWidth = window.getComputedStyle(root).getPropertyValue('--rightWidth');
      var maxT = box.clientWidth - rightWidth 
      console.log( box.clientWidth , rightWidth);
      resize.style.right = right.style.width =   mid.style.paddingRight =rightWidth  ; // 设置拖动条的位置
    } else {
      resize.style.right = right.style.width =   mid.style.paddingRight =0 ; // 设置拖动条的位置
    }

 
  }

  leftDragControllerDiv();
  rightDragControllerDiv();
</script>
<style>

</style>
三栏侧边栏的实现
