在前端开发中，我们经常会遇到需要添加可拖拽、可缩放、可旋转等交互效果的需求。这时候 interact.js 就能发挥它的作用了。interact.js 是一个开源的 JavaScript 库，它能够帮助我们实现各种交互效果。而在 interact.js 中，@interactjs/interact 就是一个重要的 npm 包。
安装
在使用 @interactjs/interact 之前，我们需要先安装它。可以使用 npm 安装：
npm install @interactjs/interact --save
使用
基本使用
在安装完 @interactjs/interact 后，我们就可以在项目中引入它了，然后就可以使用它提供的各种交互效果。
-- -------------------- ---- -------
------ -------- ---- ----------------------
-- ------------
----------------------------------
------- ----- -- -
----- ------ - ------------
-- ----
---------------------- - ------------------------- ---------------
-
--在上面的代码中，我们使用 interact 函数获取了一个可拖拽元素，并通过 draggable 方法给该元素添加了可拖拽交互效果。在 onmove 回调函数中，我们实现了元素的移动，并使用了 event.dx 和 event.dy 来获取当前鼠标移动的距离。
支持的交互效果
除了 draggable 方法之外，@interactjs/interact 支持的交互效果还有很多，例如 resizable、gesturable、droppable 等。我们可以通过它们来实现各种交互效果。下面是一些常用的交互效果的示例代码：
1. resizable
-- -------------------- ---- -------
------ -------- ---- ----------------------
-- ------------
----------------------------------
-- ---------------
------ - ----- ----- ------ ----- ------- ----- ---- ---- --
-- ----------
------- ----- -- -
----- ------ - ------------
----- - -- - - - --------------
----- ----- - ----------------------------- -- -- - ---------------------
----- ------ - ------------------------------ -- -- - ----------------------
-- ---------
------------------ - ------------------ ------
------------------- - ------------------- ------
-
--在上面的代码中，我们使用 resizable 方法给元素添加了可缩放交互效果。然后在 onmove 回调函数中，我们实现了元素的缩放。
2. gesturable
-- -------------------- ---- -------
------ -------- ---- ----------------------
-- ------------
-----------------------------------
------- ----- -- -
----- ------ - ------------
----- - ----- - - --------------
----- ------------ - ----------------- -- -
----- ---------- - ------------ - --------
-- --------
---------------------- - --------------------------
-------------------- - ----------
-
--在上面的代码中，我们使用 gesturable 方法给元素添加了可旋转交互效果。然后在 onmove 回调函数中，我们实现了元素的旋转。
3. droppable
-- -------------------- ---- -------
------ -------- ---- ----------------------
-- ------------
----------------------------------
-- ----------
------- ----- -- -
----- ------ - ------------
-- ----
---------------------- - ------------------------- ---------------
-
--
-- --------------
--------------------------------------
-- ---- ----- --------
--------------- ----- -- -
--------------------------------------------
--
-- -------------
------------ ----- -- -
-----------------------------------------------
--
-- ---------
------- ----- -- -
----- ---------------- - -------------------
----- --------------- - ------------
-- --------------
---------------------------------------------
--------------------------------------------------
-
--在上面的代码中，我们给元素添加了可拖拽交互效果，然后给目标元素添加了可放置交互效果。在 ondragenter 和 ondragleave 回调函数中，我们分别在目标元素上添加或移除了一个 CSS 类来显示当前的状态。在 ondrop 回调函数中，我们实现了将拖动元素放置到目标元素中的逻辑。
结语
本文通过介绍 @interactjs/interact npm 包的使用教程，希望能帮助大家更快地实现各种交互效果。在实际应用中，我们可以使用这些效果来让页面变得更加生动、有趣，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2b5bee3b0ab45f74a8bb2a