本文详解如何使用 jQuery UI 的 resizable() 方法实现左右两侧边栏独立、稳定地拖拽缩放，重点解决右侧面板因 position: relative 与 flex 布局冲突导致的偏移错位问题。
本文详解如何使用 jquery ui 的 `resizable()` 方法实现左右两侧边栏独立、稳定地拖拽缩放，重点解决右侧面板因 `position: relative` 与 flex 布局冲突导致的偏移错位问题。
在基于 Flexbox 的三栏布局中（左栏 + 主内容 + 右栏），直接为 .left-sidebar 和 .right-sidebar 分别启用 jQuery UI 的 resizable() 往往会导致行为不对称：左侧栏（handles: "e"）通常表现正常，而右侧栏（handles: "w"）在拖拽时会出现位置漂移、宽度计算异常甚至脱离容器等问题。根本原因在于：当右栏向左拖动时，jQuery UI 默认通过修改 left 或 transform 属性来重定位元素，但在 display: flex 容器中，子元素的 position: relative 并不参与 flex 排列逻辑，其 left 偏移会叠加在原始位置上，造成视觉错位与尺寸失控。
核心修复方案：强制重置右栏的 left 偏移量
只需在 .right-sidebar 的 resizable() 配置中添加 resize 回调函数，并将 ui.position.left 显式设为 0，即可消除 jQuery UI 自动注入的无效偏移，使其真正“锚定”在 flex 布局的右侧位置：
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
$(function() {
// 左侧栏：拖拽右侧手柄，天然符合 flex 流向，无需额外干预
$(".left-sidebar").resizable({
handles: "e",
minWidth: 100,
maxWidth: 500
});
// 右侧栏：关键修复 —— 拖拽时强制 left=0，避免 position 偏移干扰 flex 布局
$(".right-sidebar").resizable({
handles: "w",
minWidth: 100,
maxWidth: 500,
resize: function(event, ui) {
ui.position.left = 0; // ✅ 核心修复行
}
});
});同时，确保 CSS 中 .right-sidebar 保持 position: relative（jQuery UI 所需），但不依赖它参与布局定位——flex 容器会自动将其置于最右侧。完整样式建议如下（含兼容性增强）：
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh; /* 推荐使用 vh 防止滚动条干扰 */
overflow: hidden;
}
.left-sidebar,
.right-sidebar {
background: #f0f0f0;
width: 300px;
min-width: 100px;
max-width: 500px;
overflow: hidden;
position: relative; /* jQuery UI resize 必需 */
flex-shrink: 0; /* 防止被 flex 压缩 */
}
.main-content {
flex: 1;
background: #e0e0e0;
min-width: 0; /* 允许主内容在窄屏下收缩 */
}注意事项与最佳实践：
- ✅ 务必引入 jQuery UI CSS：缺少 jquery-ui.min.css 会导致手柄不可见或样式错乱；
- ✅ minWidth/maxWidth 需与 CSS 的 min-width/max-width 保持一致，避免 JS 与样式层逻辑冲突；
- ⚠️ 避免对 .main-content 设置固定宽高：它应完全由 flex 自动分配剩余空间；
- ? 如需更高稳定性或现代替代方案，可考虑 Split.js（轻量、无依赖、原生支持 flex），但本文方案零额外依赖，适合快速集成。
该方案已在 jQuery UI 1.12+ 和主流浏览器中验证有效，兼顾简洁性与可靠性，是传统 jQuery 项目中实现双侧可调侧边栏的推荐实践。
