如何通过HTML的Interact.js库实现拖拽调整大小和多点触控交互-html教程-PHP中文网

Interact.js的拖拽调整大小默认不生效，因其resizable()仅提供事件钩子，需手动在resizemove中用deltaRect更新width/height/top/left或transform；多点触控须改用gesturable()并基于ds/dt计算缩放；restrictSize修饰符需配合event.rect使用才生效，且移动端需显式启用；滚动冲突应优先用touch-action:none或inertia:true解决。

如何通过html的interact.js库实现拖拽调整大小和多点触控交互

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，这个限制就完全没生效。

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

正确做法是把尺寸校验逻辑放在 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 已接管事件流，重复调用会导致手势中断