HTML中实现拖拽改变面板大小的resize结构与事件处理-html教程-PHP中文网

html原生resize属性仅支持textarea和iframe，div不被允许；实现拖拽调整需手动监听mousedown/mousemove、计算坐标与边界，并注意touch事件中clientx的获取方式及坐标系区别。

html中实现拖拽改变面板大小的resize结构与事件处理

HTML原生`resize`属性只支持`textarea`和`iframe`

很多人试过给div加resize: both却发现拖不动——不是写法错，是浏览器根本不允许。CSS的resize属性仅对可聚焦、有用户代理默认行为的替换元素生效，div不在白名单里。真要拖拽调整面板大小，必须自己监听mousedown/mousemove，手动计算尺寸变化。

用`resizeObserver`监听尺寸变化不如手动拖拽控制精准

ResizeObserver适合响应式布局自动适配，但无法触发拖拽交互。它不产生事件源坐标，也不能中断或约束拖动过程。做面板缩放时，你真正需要的是：鼠标按下位置、实时位移量、边界限制、防抖更新。这些都得靠addEventListener配合getBoundingClientRect()算出来。

实现双面板横向拖拽分隔线的关键三步

以左右两栏为例，核心是插入一个可拖拽的div作为分隔条，并绑定事件：

给分隔条设user-select: none和cursor: ew-resize，避免文字选中和光标异常
在mousedown里调用event.preventDefault()，防止触发文本选择或页面滚动
用document.addEventListener('mousemove', handler)而非分隔条自身——否则鼠标移出太快会丢事件
计算逻辑用clientX减去初始left偏移，再约束在最小/最大宽度之间（比如左面板不能

示例关键片段：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

<div class="panel-left"></div>
<div class="resizer" id="resizer"></div>
<div class="panel-right"></div>
<p><script>
const resizer = document.getElementById('resizer');
const leftPanel = document.querySelector('.panel-left');
let isResizing = false;
let startX, startWidth;</script></p><p>resizer.addEventListener('mousedown', e => {
isResizing = true;
startX = e.clientX;
startWidth = leftPanel.offsetWidth;
document.body.style.userSelect = 'none';
});</p><p>document.addEventListener('mousemove', e => {
if (!isResizing) return;
const dx = e.clientX - startX;
const newWidth = Math.max(100, Math.min(800, startWidth + dx));
leftPanel.style.width = newWidth + 'px';
});</p><p>document.addEventListener('mouseup', () => {
isResizing = false;
document.body.style.userSelect = '';
});
</p>

移动端需额外处理`touchstart`/`touchmove`且注意`preventDefault`时机

iOS Safari 对 touch 事件拦截更严格：touchstart里不立刻preventDefault()，后续touchmove可能被系统吞掉。但防得太早又会禁用页面滚动。稳妥做法是：在touchstart里先记录坐标，等判断为水平拖拽（Math.abs(dx) > Math.abs(dy)）后再在touchmove里调用preventDefault()。

另一个坑是clientX在 touch 事件里要从e.touches[0].clientX取，不是e.clientX——后者在部分安卓机型上为0。

拖拽 resize 看似简单，实际最易出问题的是事件绑定范围、坐标系混用（pageX vs clientX vs screenX）、以及移动端 touch 和 mouse 的状态同步。别依赖 CSS 偷懒，该手算的边界和偏移，一步都不能少。