Interact.js的拖拽调整大小默认不生效，因其resizable()仅提供事件钩子，需手动在resizemove中用deltaRect更新width/height/top/left或transform；多点触控须改用gesturable()并基于ds/dt计算缩放；restrictSize修饰符需配合event.rect使用才生效，且移动端需显式启用；滚动冲突应优先用touch-action:none或inertia:true解决。
Interact.js 的拖拽调整大小为什么默认不生效
Interact.js 本身不内置“拖拽调整大小”逻辑，interact(target).resizable() 只提供缩放事件钩子，具体尺寸计算、DOM 更新、约束边界全得手动写。常见错误是只调用了 resizable() 却没监听 resizestart/resizemove，导致元素看起来“不能拉”。
关键点在于：resizemove 事件里必须显式更新元素的 width、height、top、left（或用 transform），且需结合 rect 和 deltaRect 计算偏移量。否则浏览器不会重绘。
- 必须在
resizemove中调用target.style.width = ...或target.style.transform = ... - 不要依赖
event.rect直接赋值——它反映的是“理想矩形”，但可能被 CSS box-sizing 或 border 干扰，建议用event.deltaRect增量更新 - 移动端需额外设置
axis: 'both'和edges: { top: true, left: true, bottom: true, right: true }，否则触控点识别失效
多点触控下 resize 拉扯错乱的典型原因
Interact.js 默认把多点触控（如双指缩放）当作单点连续事件处理，resizemove 的 event.rect 不反映真实两指间距变化，而是模拟出的“伪缩放”，结果就是手指越拉越快、松手后跳变。
真正支持多点缩放得绕过 resizable()，改用 gesturable() + 手动计算 scale/rotate，并同步更新元素 transform。这是最常被忽略的兼容断层。
立即学习“前端免费学习笔记（深入）”；
-
gesturable()是独立模块，需显式引入：import { interact } from 'interactjs'后再interact(target).gesturable({ onmove: handleGesture }) -
handleGesture中用event.ds（distance scaled）和event.dt（delta transform）推导缩放比例，而非读event.rect.width - 同时启用
resizable和gesturable会冲突，必须二选一；若需“桌面拖边缩放 + 移动端双指缩放”，应按event.interaction.pointerIsDown和触点数做分支判断
resize 边界限制（min/max）写法容易漏掉的细节
resizable({ modifiers: [...] }) 里的 restrictSize 修饰符不是万能的：它只约束 event.rect 输出，但如果你在 resizemove 里直接改 style.width，这个限制就完全没生效。
正确做法是把尺寸校验逻辑放在 resizemove 内部，或确保所有尺寸变更都经由 event.rect 流转。
- 推荐用
modifiers: [interact.modifiers.restrictSize({ min: { width: 100, height: 60 }, max: { width: 800, height: 600 } })]，但前提是你的 DOM 更新逻辑基于event.rect - 如果用 transform 缩放，
restrictSize失效，得自己算 baseScale × event.ds，并 clamp 到 [0.5, 3] 这类范围 - 注意
restrictSize对 touch 设备默认禁用，需加enabled: true参数才生效
移动端滚动冲突与 preventDefault 的取舍
在 iOS Safari 或 Android Chrome 上，拖拽 resize 区域时页面容易意外滚动，这是因为浏览器默认捕获了 touchmove 事件。Interact.js 虽然自动调用 preventDefault()，但仅限于 interaction 范围内——如果 resize 句柄太小、手指滑出，滚动立刻触发。
更稳的方案是给容器加 touch-action: none，但代价是该区域彻底禁用原生滚动（包括内部 overflow-y:auto 的子元素）。
- 优先尝试
interact(target).resizable({ inertia: true })，它会让交互更顺滑，减少误触滚动概率 - 若必须保留内部滚动，改用
touch-action: pan-x pan-y并在resizestart中动态切为none，resizeend再切回，但要注意 iOS 15+ 对动态修改touch-action支持不稳定 - 绝对避免在
resizemove里手动调event.preventDefault()—— Interact.js 已接管事件流，重复调用会导致手势中断
复杂点在于 resize 和 gesture 的事件优先级、CSS transform 层叠顺序、以及不同设备对 pointer events 的兼容性差异。这些地方不实测真机，光看文档很容易以为功能已就绪。
