Interact.js 是一款强大的 JavaScript 库，用于实现拖放、缩放和旋转等交互效果。它提供了丰富的功能和事件来处理各种用户交互操作。在本文中，我们将探讨 Interact.js 的使用方法及其示例代码。
安装 Interact.js
首先，我们需要安装 Interact.js。通过 npm 可以很方便地安装它：
npm install interactjs
然后，在你的 HTML 文件中添加以下 script 标签引入库文件：
<script src="node_modules/interactjs/dist/interact.min.js"></script>
基本使用
Interact.js 提供了一个简单易用的 API 来实现交互操作。下面是一个基本的示例，演示如何使元素可拖动：
-- -------------------- ---- -------
---- -----------------------------
--------
----------------------
------------
------- -------- ------- -
--- ------ - -------------
--- - - ------------------------------------------ -- -- - ---------
--- - - ------------------------------------------ -- -- - ---------
---------------------- - ------------ - - - ---- - - - - ------
----------------------------- ---
----------------------------- ---
-
---
---------上述代码中，我们首先选取要拖动的元素，并使用 interact 函数来创建一个可拖拽的交互对象。然后，我们在这个对象上调用 draggable 方法，以便启用元素的拖拽功能。
在 draggable 方法的配置选项中，我们定义了一个 onmove 回调函数，它会在元素被拖动时被触发。在这个回调函数中，我们获取了元素当前的位置，并将其加上鼠标移动的位移量（即 event.dx 和 event.dy），从而实现了元素的拖动效果。
更多示例
Interact.js 还提供了许多其他的 API 和事件，可以实现更为复杂和丰富的交互效果。下面是一些示例代码，演示 Interact.js 的一些高级功能：
可缩放的元素
-- -------------------- ---- -------
---- -----------------------------
--------
----------------------
------------
------ - ----- ----- ------ ----- ------- ----- ---- ---- -
--
----------------- -------- ------- -
--- ------ - -------------
--- - - ----------------------------------------- -- --
--- - - ----------------------------------------- -- --
------------------ - ---------------- - -----
------------------- - ----------------- - -----
- -- ---------------------
- -- --------------------
---------------------- - ------------ - - - ----- - - - ------
----------------------------- ---
----------------------------- ---
---
---------在上述代码中，我们使用 interact 函数创建了一个可缩放的交互对象，并定义了它可以被拖拽的边缘。然后，在这个对象上调用 resizemove 事件处理函数，在元素被缩放时触发。
可以旋转的元素
-- -------------------- ---- -------
---- -----------------------------
--------
----------------------
-------------
------- -------- ------- -
--- ------ - -------------
--- ----- - --------------------------------------------- -- --
----- -- ---------
---------------------- - --------- - ----- - -------
--------------------------------- -------
-
---
---------在上面的示例中，我们使用 gesturable
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32705