可拖拽大小面板通过监听mousedown、mousemove、mouseup事件，结合setPointerCapture实现；在右下角句柄触发时动态更新width/height，并限制最小尺寸。
用 DOM 操作实现可拖拽大小的面板，核心是监听鼠标事件（mousedown、mousemove、mouseup），在边缘或特定句柄上触发尺寸调整，并实时更新元素的 width 和/或 height 样式。
1. 准备 HTML 结构和基础样式
给面板加一个可拖拽的右下角句柄（或其他方向），便于用户识别操作区域：
<div id="resizable-panel"> <div class="panel-content">内容区域</div> <div class="resize-handle" id="resize-br"></div> </div>
配合简单 CSS（关键点：句柄绝对定位、z-index 高于内容、尺寸小但可点击）：
#resizable-panel {
position: relative;
width: 300px;
height: 200px;
border: 1px solid #ccc;
background: #f9f9f9;
}
.resize-handle {
position: absolute;
width: 12px;
height: 12px;
background: #999;
cursor: se-resize; /* 右下角缩放光标 */
z-index: 10;
}
#resize-br {
bottom: 0;
right: 0;
}2. 绑定鼠标事件并计算尺寸变化
监听句柄的 mousedown，记录初始鼠标位置和面板当前宽高；在 mousemove 中根据鼠标位移动态更新尺寸；mouseup 清理监听防止持续响应：
立即学习“Java免费学习笔记（深入）”；
- 用
getBoundingClientRect()获取面板当前尺寸更可靠（兼容 padding/border） - 限制最小尺寸（如
minWidth: 200,minHeight: 100），避免缩到看不见 - 使用
setPointerCapture()防止鼠标快速移动时脱离句柄丢失事件（推荐）
const panel = document.getElementById('resizable-panel');
const handle = document.getElementById('resize-br');
<p>let isResizing = false;
let startX, startY, startWidth, startHeight;</p><p>handle.addEventListener('mousedown', (e) => {
isResizing = true;
startX = e.clientX;
startY = e.clientY;
const rect = panel.getBoundingClientRect();
startWidth = rect.width;
startHeight = rect.height;</p><p>// 捕获指针，确保后续 move/up 在整个视口生效
handle.setPointerCapture(e.pointerId);
});</p><p>document.addEventListener('mousemove', (e) => {
if (!isResizing) return;</p><p>const dx = e.clientX - startX;
const dy = e.clientY - startY;
const newWidth = Math.max(200, startWidth + dx);
const newHeight = Math.max(100, startHeight + dy);</p><p>panel.style.width = newWidth + 'px';
panel.style.height = newHeight + 'px';
});</p><p>document.addEventListener('mouseup', () => {
if (isResizing) {
isResizing = false;
handle.releasePointerCapture();
}
});3. 支持多方向拖拽（可选增强）
只需为不同方向添加对应句柄（如 resize-r、resize-b、resize-bl 等），并在 mousedown 中识别方向，然后在 mousemove 中只调整对应维度：
-
仅宽度变化（右/左句柄）：只更新
width，保持height不变 -
仅高度变化（上/下句柄）：只更新
height，保持width不变 -
四角句柄：同时更新
width和height，注意top/left偏移也要同步调整（例如左上角缩放需重设left和top）
4. 注意事项与优化建议
原生 DOM 实现轻量，但要注意几个实际问题：
- 避免在
mousemove中频繁读写style——可先计算再批量赋值，或用requestAnimationFrame节流 - 移动端需额外支持
touchstart/touchmove/touchend，并把e.touches[0]替换e - 句柄太小影响体验，可用
padding或伪元素扩大热区，但保持视觉小巧 - 若面板有
max-width/max-height或父容器约束，需在计算中一并考虑边界
不复杂但容易忽略细节。按这个思路，一个基础可靠的可拖拽大小面板就完成了。
