拖拽分隔线必须用 JavaScript 监听 mousemove 和 touch 事件，通过 mousedown/touchstart 绑定、mousemove/touchmove 动态更新 CSS 变量、mouseup/touchend 清理监听并保存状态；需用 flex 布局、绝对定位滑块、transform 居中、边界限制及 localStorage 持久化。
拖拽分隔线必须用 JavaScript 监听 mousemove
纯 CSS 无法实现拖拽调节栏宽，resize 属性只支持 <textarea></textarea> 或设置了 overflow: auto 的块级元素，对双栏容器无效。真实可用的方案是：在分隔线上绑定 mousedown，然后在 document 上监听 mousemove 动态计算位置，最后用 mouseup 清除监听。
常见错误现象包括：
- 松手后分隔线跳动——没在
mouseup中移除document.onmousemove - 拖拽卡顿或响应延迟——在
mousemove中直接修改style.width触发重排，应改用transform: translateX()或 CSS 变量 +will-change - 右侧内容错位——没同步重置
textarea或滚动容器的scrollLeft/scrollTop
left/right 栏宽度不能都用百分比硬写死
如果左侧设 width: 60%、右侧设 width: 40%，拖拽时只能靠 JS 覆盖内联样式，但会丢失响应式能力。更稳妥的做法是：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 父容器设
display: flex，两栏用flex: 1占位 - 分隔线用绝对定位（
position: absolute），初始left: 60% - 拖拽时只更新一个 CSS 自定义属性，比如
--split-pos: 65%，再用calc()控制左右栏宽度：flex: 0 0 calc(var(--split-pos) - 8px)（减去滑块宽度） - 避免直接操作
offsetWidth，改用getBoundingClientRect().left获取相对父容器坐标
移动端拖拽失效？得补 touch 事件
桌面端靠 mouse 系列事件就够了，但 iOS 和 Android 需要显式监听 touchstart/touchmove/touchend，且注意：
立即学习“前端免费学习笔记（深入）”；
-
touchmove默认会触发页面滚动，需加e.preventDefault() - 触摸点坐标要用
e.touches[0].clientX，不是e.clientX - 不要同时绑定 mouse 和 touch 事件，否则在部分安卓浏览器里会触发两次
- 建议用
if ('ontouchstart' in window)做环境判断，分别注册对应事件组
滑块自身要脱离文档流且居中对齐
分隔线（滑块）如果用普通 <div> 放在两栏之间，会被 flex 布局挤偏。正确做法是：<ul>
<li>滑块设 <code>position: absolute，父容器加 position: relative
left: 60%，但需减去自身一半宽度保证视觉居中：transform: translateX(-50%)
left 值，不碰 transform，否则和 CSS 动画冲突left 范围：最小不小于 20%（留出左栏最小宽度），最大不大于 80%
实际最易被忽略的一点：拖拽结束时，必须把最终位置存进 localStorage 或 URL hash，否则刷新页面就回到默认宽度。这个状态同步动作不在 DOM 操作里，但用户感知极强。
