interact.js 是一款輕量且功能強(qiáng)大的 JavaScript 拖拽交互庫(kù)，核心用于實(shí)現(xiàn)元素的拖拽、縮放、旋轉(zhuǎn)等交互式操作。

官網(wǎng)

一、核心特點(diǎn)

• 輕量無依賴，體積僅約 10KB（壓縮后），不依賴 jQuery 等框架。
• 支持多端適配，兼容桌面端（鼠標(biāo)）和移動(dòng)端（觸摸），適配主流瀏覽器。
• 功能豐富，除基礎(chǔ)拖拽外，還支持元素縮放、旋轉(zhuǎn)、拖拽對(duì)齊、碰撞檢測(cè)等進(jìn)階功能。
• 高度可定制，可通過配置限制拖拽范圍、設(shè)置縮放比例、自定義交互回調(diào)等。

二、核心功能

1. 拖拽（Draggable）：支持元素自由拖拽、限制拖拽方向（水平 / 垂直）、設(shè)置拖拽邊界。
2. 縮放（Resizable）：允許通過拖拽元素邊緣 / 角落調(diào)整尺寸，可限制縮放比例和方向。
3. 旋轉(zhuǎn)（Rotatable）：支持鼠標(biāo) / 觸摸控制元素旋轉(zhuǎn)，可設(shè)置旋轉(zhuǎn)中心和角度范圍。
4. 交互輔助：提供拖拽對(duì)齊（吸附到網(wǎng)格 / 其他元素）、碰撞檢測(cè)、拖拽排序等實(shí)用功能。

三、適用場(chǎng)景

• 頁(yè)面組件拖拽排序（如儀表盤、表單元素配置）。
• 可視化工具（如圖表編輯器、流程圖制作工具）。
• 響應(yīng)式界面調(diào)整（如可縮放的面板、彈窗）。
• 移動(dòng)端交互組件（如拖拽式菜單、滑動(dòng)卡片）。

四、安裝使用

首先需要引入 interact.js 庫(kù)，有兩種方式：

1. CDN 引入（推薦快速測(cè)試）：

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

2. npm 安裝（適合項(xiàng)目開發(fā)）：

   npm install interactjs
   

五、相關(guān)屬性

1、拖拽（draggable）核心屬性

通過 interact(selector).draggable({ /* 配置 */ }) 定義，主要屬性包括：

2、縮放（resizable）核心屬性

通過 interact(selector).resizable({ /* 配置 */ }) 定義，主要屬性包括：

3、通用事件屬性

所有交互（拖拽、縮放、旋轉(zhuǎn)）都支持通過 .on(eventName, callback) 監(jiān)聽事件，常用事件：

4、注意事項(xiàng)（1.10.7 版本）

1. 該版本依賴元素的 transform 屬性計(jì)算位置，需確保元素未被其他 transform 樣式（如 scale）干擾，否則可能導(dǎo)致位置偏移。
2. autoScroll 對(duì)嵌套滾動(dòng)容器的支持有限，復(fù)雜場(chǎng)景可能需要手動(dòng)處理滾動(dòng)邏輯。

六、拖拽示例

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

總結(jié) 

到此這篇關(guān)于JavaScript前端拖拽插件interact.js交互式操作方法的文章就介紹到這了,更多相關(guān)interact.js前端拖拽插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論