interact.js 前端拖拽插件

interact.js 是一款轻量且功能强大的 JavaScript 拖拽交互库，核心用于实现元素的拖拽、缩放、旋转等交互式操作。

官网

一、核心特点

轻量无依赖，体积仅约 10KB（压缩后），不依赖 jQuery 等框架。
支持多端适配，兼容桌面端（鼠标）和移动端（触摸），适配主流浏览器。
功能丰富，除基础拖拽外，还支持元素缩放、旋转、拖拽对齐、碰撞检测等进阶功能。
高度可定制，可通过配置限制拖拽范围、设置缩放比例、自定义交互回调等。

二、核心功能

拖拽（Draggable）：支持元素自由拖拽、限制拖拽方向（水平 / 垂直）、设置拖拽边界。
缩放（Resizable）：允许通过拖拽元素边缘 / 角落调整尺寸，可限制缩放比例和方向。
旋转（Rotatable）：支持鼠标 / 触摸控制元素旋转，可设置旋转中心和角度范围。
交互辅助：提供拖拽对齐（吸附到网格 / 其他元素）、碰撞检测、拖拽排序等实用功能。

三、适用场景

页面组件拖拽排序（如仪表盘、表单元素配置）。
可视化工具（如图表编辑器、流程图制作工具）。
响应式界面调整（如可缩放的面板、弹窗）。
移动端交互组件（如拖拽式菜单、滑动卡片）。

四、安装使用

首先需要引入 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) 监听事件，常用事件：

事件名	触发时机	回调参数（event）关键信息
`[type]start`	交互开始时（如 `dragstart`）	`event.target`（目标元素）、初始坐标 / 角度。
`[type]move`	交互过程中（如 `dragmove`）	`event.dx/dy`（位移变化）、`event.angle`（角度变化）等。
`[type]end`	交互结束时（如 `dragend`）	`event.velocity`（结束时速度）、最终状态信息。

4、注意事项（1.10.7 版本）

该版本依赖元素的 transform 属性计算位置，需确保元素未被其他 transform 样式（如 scale）干扰，否则可能导致位置偏移。
autoScroll 对嵌套滚动容器的支持有限，复杂场景可能需要手动处理滚动逻辑。

六、拖拽示例

javascript 复制代码

// 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) {}   
        },
    });