实现侧边栏动态调整宽度效果——简易做法

拖拽两个贴贴的div

HTML结构

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid.js 表格</title>
    <style>
      .item {
        display: flex;
        width: 100%;
        height: 300px;
      }
      .item-left {
        flex: 1;
        height: 100%;
        background-color: black;
      }
      .item-right {
        position: relative;
        box-sizing: border-box;
        padding: 0 15px;
        width: 50%;
        height: 100%;
        background-color: aquamarine;
      }
      .item-right-control {
        position: absolute;
        left: 0;
        top: 0;
        font-size: 1;
        cursor: pointer;
        width: 5px;
        background-color: red;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div class="item-left" style="color:white;">
        <span>你可以不用假装</span>
      </div>
      <div class="item-right">
        <div class="item-right-control"></div>
        <div class="item-right-body">12321</div>
      </div>
    </div>
    <div class="text"></div>
    <script src="./1.js"> 
    // 代码如下面
    </script>
  </body>
</html>

核心JS代码

javascript 复制代码
let control = document.querySelector(".item-right-control");
let box = document.querySelector(".item-right");
let explain = document.querySelector(".text");
control.addEventListener("mousedown", (e) => {
  document.body.style.userSelect = "none";
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
});
function onMouseMove(e) {
  if (window.innerWidth - e.screenX >= 300 && window.innerWidth - e.screenX <= 1200) {
    box.style.width = box.offsetWidth + (box.offsetLeft - e.screenX) + "px";
  }
}
function onMouseUp() {
  document.body.style.userSelect = "auto";
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
}

完整JS代码

javascript 复制代码
let control = document.querySelector(".item-right-control");
let box = document.querySelector(".item-right");
let explain = document.querySelector(".text");
control.addEventListener("mousedown", (e) => {
  document.body.style.userSelect = "none";
  explain.innerHTML = `
    需要改变宽度的盒子距离最左侧屏幕的距离:${box.offsetLeft}<br/>
    盒子的宽度:${box.offsetWidth}<br/>
  `;
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
});
explain.innerHTML = `
    需要改变宽度的盒子距离最左侧屏幕的距离:${box.offsetLeft}<br/>
    盒子的宽度:${box.offsetWidth}<br/>
  `;
function onMouseMove(e) {
  explain.innerHTML = `
    需要改变宽度的盒子距离最左侧屏幕的距离:${box.offsetLeft}<br/>
    盒子的宽度:${box.offsetWidth}<br/>
    盒子改变后的宽度:${box.offsetWidth + box.offsetLeft - e.screenX}<br/>
    鼠标相较于盒子控件的距离:${box.offsetLeft - e.screenX}<br/>
    视口宽度:${window.innerWidth}<br/>
    是否可以拖动:${window.innerWidth - box.offsetLeft >= 300}
  `;
  if (window.innerWidth - e.screenX >= 300 && window.innerWidth - e.screenX <= 1200) {
    box.style.width = box.offsetWidth + (box.offsetLeft - e.screenX) + "px";
  }
}

function onMouseUp() {
  document.body.style.userSelect = "auto";
  document.removeEventListener("mousemove", onMouseMove);
  document.removeEventListener("mouseup", onMouseUp);
}
相关推荐
天天扭码2 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
Cao1234567893217 分钟前
简易学生成绩管理系统(C语言)
c语言·开发语言
The Future is mine8 分钟前
C# new Bitmap(32043, 32043, PixelFormat.Format32bppArgb)报错:参数无效,如何将图像分块化处理?
开发语言·c#
亿坊电商11 分钟前
PHP框架在微服务迁移中能发挥什么作用?
开发语言·微服务·php
烁34711 分钟前
每日一题(小白)模拟娱乐篇33
java·开发语言·算法
小希爸爸22 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.25 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
坐吃山猪30 分钟前
Python-Agent调用多个Server-FastAPI版本
开发语言·python·fastapi
uhakadotcom31 分钟前
Fluid:云原生数据加速与管理的简单入门与实战
前端
88号技师32 分钟前
【1区SCI】Fusion entropy融合熵,多尺度,复合多尺度、时移多尺度、层次 + 故障识别、诊断-matlab代码
开发语言·机器学习·matlab·时序分析·故障诊断·信息熵·特征提取