Interact 是一个用于前端交互的 JavaScript 库，可以轻松地实现拖拽、缩放等交互效果。它是一个基于 PointerEvents API 的库，支持触摸屏和鼠标交互。本文将介绍如何使用 Interact，让您在前端开发中轻松实现各种交互效果。
安装 Interact
使用 npm 安装 Interact：
npm install interactjs --save
或者通过 CDN 引入 Interact：
<script src="https://cdn.jsdelivr.net/npm/interactjs@1.10.11/dist/interact.min.js"></script>
接下来，就可以开始使用 Interact 了。
拖拽
Interact 提供了非常简单易用的方式实现元素的拖拽效果。使用 Interact 拖拽一个元素共需要 3 个步骤：
- 定义拖拽目标
- 声明拖拽行为
- 绑定拖拽事件
下面是一个简单的拖拽示例：
-- -------------------- ---- -------
---- ------------
------------------------ ---- ------ ------ ------- ----------------
--------
-----------------
------------
------- -------- ------- -
--- ------ - ------------
-- ---------
--- - - ------------------------------------------ -- -- - --------
--- - - ------------------------------------------ -- -- - --------
-- ------
---------------------- - ------------ - - - ---- - - - - -----
-- --------
----------------------------- --
----------------------------- --
-
--
---------上面代码中，我们先定义需要拖拽的元素 .drag，再声明其可以被拖拽（.draggable() ），并绑定了一个 onmove 事件。该事件会在每当移动元素时被触发，它会计算元素新位置，并将其移动到新位置。这里我们使用了 CSS transform 属性来实现元素的平移，而不是它的 left 和 top 属性，是因为 transform 的效率更高，能够更流畅地完成移动。
缩放
Interact 也支持元素的缩放操作。使用 Interact 缩放一个元素共需要 3 个步骤：
- 定义缩放目标
- 声明缩放行为
- 绑定缩放事件
下面是一个简单的缩放示例：
-- -------------------- ---- -------
---- --------------
------------------------ ---- ------ ------ ------- -----------------
--------
-------------------
------------
-- -----------
------ - ----- ----- ------ ----- ------- ----- ---- ---- --
------- -------- ------- -
--- ------ - ------------
--- - - ------------------------------------------ -- --
--- - - ------------------------------------------ -- --
-- ------
------------------ - ---------------- - ----
------------------- - ----------------- - ----
-- ----------------
- -- --------------------
- -- -------------------
---------------------- - ------------ - - - ----- - - - -----
-- --------
----------------------------- --
----------------------------- --
-
--
---------上面代码中，我们先定义需要缩放的元素 .resize，再声明其可以被缩放（.resizable() ），并绑定了一个 onmove 事件。该事件会在每当缩放元素时被触发，它会计算元素新的宽高，并根据新的宽高和移动距离来移动元素。这里我们使用了 event.deltaRect 属性来获取移动距离，它会自动计算元素的移动量。
按键事件
Interact 提供了 hold 事件，可用于检测用户在元素上按下鼠标键的时间。例如，我们可以使用 hold 事件在元素上按下鼠标左键 1 秒钟后执行某个操作。
下面是一个用于检测元素是否被按下 1 秒的示例：
-- -------------------- ---- -------
---- ------------
------------------------ ---- ------ ------ ------- -------------------
--------
-----------------
----------- -------- ------- -
---------------------------------- - ------
--
---------上面代码中，我们使用了 .on() 函数绑定了一个 hold 事件，当用户在元素上按下鼠标左键 1 秒钟后，会使元素的颜色从红色变成蓝色。
结论
Interact 是一个非常强大的前端交互库，可以很容易地实现拖拽、缩放等各种交互效果。在本文中，我们简单介绍了 Interact 的使用方法，并提供了一些示例代码。如果您想尝试更多的交互效果，可以阅读 Interact 的官方文档，或查看一些 Interact 的示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/161785