interact.js 是一款轻量且功能强大的 JavaScript 拖拽交互库，核心用于实现元素的拖拽、缩放、旋转等交互式操作。
官网
一、核心特点
- 轻量无依赖，体积仅约 10KB（压缩后），不依赖 jQuery 等框架。
- 支持多端适配，兼容桌面端（鼠标）和移动端（触摸），适配主流浏览器。
- 功能丰富，除基础拖拽外，还支持元素缩放、旋转、拖拽对齐、碰撞检测等进阶功能。
- 高度可定制，可通过配置限制拖拽范围、设置缩放比例、自定义交互回调等。
二、核心功能
三、适用场景
- 页面组件拖拽排序（如仪表盘、表单元素配置）。
- 可视化工具（如图表编辑器、流程图制作工具）。
- 响应式界面调整（如可缩放的面板、弹窗）。
- 移动端交互组件（如拖拽式菜单、滑动卡片）。
四、安装使用
首先需要引入 interact.js 库，有两种方式：
CDN 引入（推荐快速测试）：
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
npm 安装（适合项目开发）：
npm install interactjs
五、相关属性
1、拖拽（draggable）核心属性
通过 interact(selector).draggable({ /* 配置 */ }) 定义，主要属性包括：
| enabled | boolean | 是否启用拖拽（默认 true，设为 false 可动态禁用）。 |
| inertia | boolean / 对象 | 启用惯性拖拽（拖拽结束后继续滑动）。- 为对象时可配置：- resistance：阻力（0~1，值越小惯性越强，默认 0.1）；- minSpeed：触发惯性的最小速度（默认 100px/s）；- endSpeed：惯性结束时的速度阈值（默认 10px/s）。 |
| autoScroll | boolean / 对象 | 拖拽到容器边缘时自动滚动容器（如页面、滚动框）。- 为对象时可配置：- speed：滚动速度（默认 50px/s）；- margin：触发滚动的边缘距离（默认 60px）；- container：指定滚动容器（默认 window）。 |
| restrict | 对象 | 限制拖拽范围，支持：- restriction：限制区域（parent/ 选择器 / 坐标对象 {left, top, right, bottom}）；- endOnly：true 时仅在拖拽结束后校正位置（默认实时限制）；- elementRect：元素参与限制的区域（如 {left:0, right:1, top:0, bottom:1} 代表整个元素）。 |
| axis | 'x' / 'y' / null | 限制拖拽方向（x 水平，y 垂直，null 自由拖拽，默认 null）。 |
| snap | 对象 | 拖拽时吸附到网格或元素，支持：- targets：吸附目标（如 interact.snappers.grid({x:20, y:20}) 表示 20px 网格）；- offset：吸附偏移量（如 {x:10, y:10}）；- relativePoints：元素上的吸附参考点（如 [{x:0.5, y:0.5}] 为中心点）。 |
| allowFrom | 选择器 | 仅允许通过元素内的指定子元素触发拖拽（如 .handle 表示仅通过手柄拖拽）。 |
| ignoreFrom | 选择器 | 忽略元素内的指定子元素（不触发拖拽，如 .no-drag）。 |
2、缩放（resizable）核心属性
通过 interact(selector).resizable({ /* 配置 */ }) 定义，主要属性包括：
| enabled | boolean | 是否启用缩放（默认 true）。 |
| edges | 对象 | 允许缩放的边缘（{left, right, top, bottom}，设为 true 启用对应边缘）。例：{left: true, right: true, bottom: true} 允许左、右、下边缘缩放。 |
| inertia | boolean / 对象 | 缩放惯性（类似拖拽，结束后继续微小缩放），配置同拖拽的 inertia。 |
| restrict | 对象 | 限制缩放范围，支持：- min：最小尺寸（{width, height}）；- max：最大尺寸（{width, height}）；- ratio：宽高比（如 16/9 锁定比例）。 |
| snap | 对象 | 缩放到指定网格尺寸，如 {targets: [interact.snappers.grid({width:50, height:50})]} 表示宽高按 50px 递增。 |
| allowFrom / ignoreFrom | 选择器 | 同拖拽，控制触发缩放的子元素。 |
3、通用事件属性
所有交互（拖拽、缩放、旋转）都支持通过 .on(eventName, callback) 监听事件，常用事件：
| [type]start | 交互开始时（如 dragstart） | event.target（目标元素）、初始坐标 / 角度。 |
| [type]move | 交互过程中（如 dragmove） | event.dx/dy（位移变化）、event.angle（角度变化）等。 |
| [type]end | 交互结束时（如 dragend） | event.velocity（结束时速度）、最终状态信息。 |
4、注意事项（1.10.7 版本）
六、拖拽示例
// html
<div id="content"></div>
// js
let position = { x: 0, y: 0 };
interact('#content').draggable({
ignoreFrom: ".restore-drag,.tc-fz-input",// 忽略的类
listeners: {
start:(event) {},
move (event) {
position.x += event.dx;
position.y += event.dy;
event.target.style.transform = `translate(${position.x}px, ${position.y}px)`; },
end(event) {}
},
});
