纯css实现抽屉拖拽需设resize: horizontal与overflow:auto/scroll/hidden，且父容器为flex；firefox需手动启用；全兼容需js监听mousedown/mousemove，用requestanimationframe节流并持久化至localstorage。
用 resize CSS 属性最简实现抽屉宽度拖拽
不需要 JS，纯 CSS 就能实现抽屉侧边栏的拖拽缩放——前提是抽屉容器是 <aside></aside> 或带 display: block 的块级元素，且设置了明确的 width 或 flex-basis。关键在 resize: horizontal + overflow: auto 组合。
常见错误是直接给抽屉加 resize 却没设 overflow，结果拖拽手柄不出现。浏览器只对 overflow !== visible 的可替换/块级元素渲染 resize 控件。
-
resize: horizontal必须配合overflow: auto、scroll或hidden - 父容器需为
display: flex（抽屉通常作为 flex item），否则宽度变化可能不触发重排 - 避免设
max-width或min-width过死，否则拖拽到边界会卡住 - Chrome / Edge / Safari 支持良好；Firefox 默认禁用该属性（需用户手动开启
layout.css.resize-grab-area.enabled）
用 mousemove + getBoundingClientRect() 手动实现兼容性拖拽
当需要全浏览器支持（尤其 Firefox）或更精细控制（比如限制最小宽度、联动主内容区 margin），就得上 JS。核心思路：监听拖拽条 mousedown → 记录初始位置和当前宽度 → mousemove 时计算偏移 → 更新抽屉 style.width。
容易忽略的是事件绑定位置：不能只绑在拖条上，要 document 级监听 mousemove 和 mouseup，否则鼠标快速移动时容易脱靶。
- 拖条元素需设
user-select: none，防止文字选中干扰 - 用
event.clientX - startX计算 delta，而非直接读clientX，避免窗口滚动影响 - 更新宽度前务必做边界判断：
Math.max(minWidth, Math.min(maxWidth, newWidth)) - 若抽屉是 flex item，建议改用
flex-basis替代width，避免与 flex 布局冲突
React 中用 useRef + useState 管理拖拽状态
函数组件里别直接操作 DOM 宽度，而是把拖拽目标宽度存进 state，让 React 触发重渲染。用 useRef 缓存初始坐标和尺寸，避免闭包里读到过期值。
典型坑是 mousemove 回调里频繁 setState 导致性能抖动。应节流（throttle）或用 requestAnimationFrame 批量更新。
- 在
useEffect里绑定/解绑全局事件，依赖数组为空数组保证只执行一次 - 拖拽开始时调用
event.preventDefault()，防止 Chrome 下默认拖拽行为（如拖图片）干扰 - 移动端需额外处理
touchstart/touchmove，且clientX要从touches[0]读 - 抽屉宽度单位建议统一用
px，避免 % 在 resize 后因父容器变化导致计算漂移
拖拽后如何持久化宽度？localStorage 是最轻量方案
用户拖完关掉页面，下次打开又回到默认宽度，体验断层。用 localStorage 存当前宽度是最小成本解法，比 IndexedDB 或服务端存储更合适这类 UI 状态。
注意不是每次 mousemove 都写入 localStorage —— 频繁 IO 会卡顿。应在 mouseup 后写入，并加 try/catch 防止 quota 超限报错。
- key 名建议带项目前缀，例如
myapp-drawer-width，避免和其他脚本冲突 - 读取时先检查
localStorage.getItem()是否为有效数字，非数字则 fallback 到默认值 - 如果支持多设备同步，localStorage 不够用，此时才考虑 URL hash（
location.hash = #w=240）或服务端 profile - 测试时记得清空 localStorage 模拟首次访问，别被缓存值误导
拖拽逻辑本身不难，真正花时间的是边界处理：鼠标移出视口、快速拖拽脱靶、flex 与 width 冲突、移动端 touch 事件坐标差异……这些细节堆起来，才是“看似简单却总调不对”的原因。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
