html原生不支持任意元素拖拽resize，需用javascript监听mousedown/mousemove/mouseup事件，通过clientx/y与getboundingclientrect计算delta并更新style宽高，注意preventdefault、事件绑定到document、内存泄漏及最小尺寸校验。
HTML原生不支持拖拽resize，必须用JavaScript实现
浏览器没有内置的 resize 拖拽句柄机制——哪怕设置了 resize: both 的 CSS，也只对 <textarea></textarea> 有效，且无法自定义方向、触发逻辑或绑定到任意元素。真要让一个 <div> 被拖拽调整宽高，得靠监听鼠标事件 + 手动计算尺寸变化。<h3>用 mousemove + getBoundingClientRect 实现基础拖拽缩放</h3>
<p>核心思路是：在元素右下角加一个 <code><div class="resize-handle">，监听它的 <code>mousedown → 记录初始尺寸和鼠标位置 → mousemove 时用当前鼠标坐标减去初始坐标，算出 delta，再更新元素的 width 和 height。
关键细节：
-
getBoundingClientRect()返回的是相对于视口的坐标，但鼠标事件的clientX/clientY也是视口坐标，二者可直接相减，不用换算 - 必须在
mousedown后立刻调用event.preventDefault()，否则会触发文本选中或默认拖拽行为 - 推荐把 resize 逻辑绑定到
document上（而非 handle 元素），避免鼠标快速移动时移出 handle 导致中断 - 记得在
mouseup时清理mousemove和mouseup监听器，防止内存泄漏
const el = document.querySelector('.resizable');
const handle = el.querySelector('.resize-handle');
<p>handle.addEventListener('mousedown', (e) => {
e.preventDefault();
const rect = el.getBoundingClientRect();
const startX = e.clientX;
const startY = e.clientY;
const startWidth = rect.width;
const startHeight = rect.height;</p><p>const onMouseMove = (moveE) => {
const dx = moveE.clientX - startX;
const dy = moveE.clientY - startY;
el.style.width = Math.max(100, startWidth + dx) + 'px';
el.style.height = Math.max(60, startHeight + dy) + 'px';
};</p><p>const onMouseUp = () => {
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};</p><p>document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});</p>
限制最小尺寸、约束比例、支持四向拖拽的常见坑
实际项目里，用户会乱拉，不加约束容易崩 UI。几个高频问题：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 没设
min-width/min-height或 JS 里没做Math.max()校验 → 元素缩成一条线甚至消失 - 想保持宽高比，但只改了
width没同步算height，或反之；正确做法是记录初始宽高比ratio = startWidth / startHeight，然后按需锁定一个轴 - 右下角 handle 只能拉伸，要支持右、下、左下、右下等多方向，就得为每个方向写独立 handle，并在
mousedown时判断拖拽类型（比如 class 名含resize-e就只改 width） - CSS 中忘记设
box-sizing: border-box→ padding/border 会叠加到 width/height 上，导致尺寸跳变
用 ResizeObserver 不能替代鼠标拖拽
ResizeObserver 是监听元素尺寸**被动变化**的（比如父容器 resize、内容撑开），它不会响应鼠标拖拽动作本身。你用 JS 改了 el.style.width，ResizeObserver 确实会触发，但它不能帮你实现拖拽逻辑，只是个“通知器”。别把它和交互控制混为一谈。
真正要省事，可以封装一个函数接收元素和方向参数，内部统一处理事件绑定、边界校验、样式更新；但底层逃不开 mousedown/mousemove/mouseup 这一套。浏览器至今没提供声明式 resize API，这就是现状。
