原生 resize: both 仅支持右下角缩放且需 overflow 和 display: block 才生效，无法拖拽位移、防越界或持久化；真“可拖拽+可缩放”弹窗须手写 mousedown/mousemove 逻辑，严格区分移动与缩放区域、防抖、解绑事件并结合 localStorage 或 ResizeObserver 持久化。
原生 resize CSS 属性能快速实现弹窗缩放，但仅限右下角拉伸、不支持拖拽位移、无法限制尺寸范围；真要「可拖拽 + 可缩放」的弹窗，必须手写 mousedown/mousemove 逻辑，配合坐标偏移计算和事件清理 —— 否则松手后还会跟着鼠标动、缩放抖动、移出面板就中断。
为什么直接加 resize: both 不行
它只对 <textarea> 和设置了 overflow: auto | hidden | scroll 的块级元素生效，且浏览器行为不一致：Chrome/Edge 要求 display: block 才触发，Safari 对 resize: horizontal 支持差，统一用 both 更稳。但它完全不处理位置移动，也不响应鼠标在边缘的 hover 状态，更不会保存尺寸或防越界。
常见误用现象：
- 加了
resize: both但没设overflow，缩放手柄不出现 - 在
Firefox里能缩放，Chrome里完全没反应（漏了display: block） - 缩放后刷新页面，尺寸回到初始值（没结合
localStorage或ResizeObserver持久化）
怎么实现右下角拖拽缩放（非 textarea）
核心是监听右下角句柄的 mousedown，记录初始宽高和鼠标位置，再在 mousemove 中计算 delta 更新尺寸。关键不是“算”，而是“不抖”和“不断连”。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 句柄元素必须设
position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; -
mousedown时立刻调用event.preventDefault()，否则会触发文本选中或默认拖拽 - delta 计算用
e.clientX - startX和e.clientY - startY，不要反复调getBoundingClientRect()（布局重排卡顿） - 把
mousemove和mouseup绑到document上，避免鼠标移出句柄就停止响应 -
mouseup触发后，必须立刻解绑document上的这两个监听器，否则下次点击可能意外续拖
拖拽移动 + 缩放共存时容易踩的坑
两个功能共用 mousedown 事件，但意图不同：标题栏按下去是移动，右下角按下去是缩放。如果没做区域区分，就会互相干扰。
安全做法：
- 给标题栏加
data-action="move"，句柄加data-action="resize" - 在
mousedown回调里用e.target.dataset.action判断意图，分别设置isMoving = true或isResizing = true - 移动逻辑用
offsetX/offsetY算初始偏移，缩放逻辑用clientX/clientY算 delta —— 别混用 - 两者都要监听
document上的mousemove，但内部分支严格隔离，避免状态污染 - 任一操作结束（
mouseup），都清空isMoving和isResizing，并解绑事件
要不要用 ResizeObserver 补充尺寸感知
它不能替代拖拽缩放本身，但能捕获你控制不了的尺寸变化：比如父容器被 CSS 媒体查询收缩、Flex/Grid 重排、甚至用户手动缩放网页（Ctrl +）。这些场景下，弹窗可能被挤压变形，而用户没主动拖过。
典型用法：
const ro = new ResizeObserver(entries => {
const { width, height } = entries[0].contentRect;
localStorage.setItem('modal-size', JSON.stringify({ width, height }));
});
ro.observe(document.querySelector('.modal'));
注意两点：
- 它不触发初始尺寸，首次加载得手动读一次
getBoundingClientRect()并存入localStorage - 它不响应
transform: scale()这类视觉缩放，只观测 layout 尺寸变化
真正难的不是写出拖拽缩放，而是让每次 mouseup 都干净解绑、每次 mousemove 都不重排布局、每次尺寸变化都可持久化 —— 这些细节没处理好，用户就会觉得“卡”“粘”“丢尺寸”。
