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

官網(wǎng)

一、核心特點

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

二、核心功能

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

三、適用場景

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

四、安裝使用

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

1. CDN 引入（推薦快速測試）：

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

2. npm 安裝（適合項目開發(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、注意事項（1.10.7 版本）

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

六、拖拽示例

// 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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論