JavaScript前端拖拽插件interact.js交互式操作方法

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

官网

一、核心特点

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

二、核心功能

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

三、适用场景

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

四、安装使用

首先需要引入 interact.js 库，有两种方式：

1. CDN 引入（推荐快速测试）：

   <script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
   

2. npm 安装（适合项目开发）：

   npm install interactjs
   

五、相关属性

1、拖拽（draggable）核心属性

通过 interact(selector).draggable({ /* 配置 */ }) 定义，主要属性包括：

2、缩放（resizable）核心属性

通过 interact(selector).resizable({ /* 配置 */ }) 定义，主要属性包括：

3、通用事件属性

所有交互（拖拽、缩放、旋转）都支持通过 .on(eventName, callback) 监听事件，常用事件：

4、注意事项（1.10.7 版本）

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

六、拖拽示例

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

总结 

到此这篇关于JavaScript前端拖拽插件interact.js交互式操作方法的文章就介绍到这了,更多相关interact.js前端拖拽插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论