前言
在前端开发中，实现用户交互是非常重要的一部分。@interactjs/core 是一个强大的 JavaScript 库，可以让开发者轻松地实现拖拽、放缩和旋转等各种交互操作，并提供了丰富的可定制选项和事件回调函数。
本篇文章将为大家介绍如何使用 npm 包 @interactjs/core，让你快速掌握这个强大的库，轻松实现交互操作。
安装
首先，我们需要在项目中安装 @interactjs/core，可以使用 npm 或 yarn 进行安装：
npm install @interactjs/core
或
yarn add @interactjs/core
使用
在安装完成后，我们可以在 JavaScript 中引入 @interactjs/core：
import interact from '@interactjs/core'
现在，我们可以开始使用它的功能了。
基本操作
下面介绍几个基本的交互操作。
拖拽
要实现拖拽操作，我们需要指定元素和目标区域，可以使用 interact(target) 方法指定目标元素。然后，我们通过指定事件类型和回调函数来实现拖拽操作。
-- -------------------- ---- -------
----------------
------------
---------- -
------------ -
----------------- ---------
--
----------- -
----- ------ - ------------
----- - - ------------------------------------------ -- -- - --------
----- - - ------------------------------------------ -- -- - --------
---------------------- - ------------------ --------
----------------------------- --
----------------------------- --
--
--
--上述代码中，我们使用 draggable() 方法指定拖拽操作，listeners 对象中的 start() 和 move() 方法分别对应拖拽操作开始和移动过程中的回调函数。
放缩
要实现放缩操作，我们需要指定目标元素，然后通过指定事件类型和回调函数来实现放缩操作。
-- -------------------- ---- -------
----------------
------------
-- ------
------ - ----- ----- ------ ----- ------- ----- ---- ---- --
---------- -
------------ -
------------------- ---------
--
----------- -
----- ------ - ------------
----- - - ----------------------------------------- -- -
----- - - ----------------------------------------- -- -
------------------ - -----------------------
------------------- - ------------------------
--
--
--上述代码中，我们使用 resizable() 方法指定放缩操作，listeners 对象中的 start() 和 move() 方法分别对应放缩操作开始和移动过程中的回调函数。
旋转
要实现旋转操作，我们需要指定目标元素，然后通过指定事件类型和回调函数来实现旋转操作。
-- -------------------- ---- -------
----------------
-------------
------------- -
----- ------ - ------------
----- ----- - --------------------------------------------- -- -
----- ------ - ----- - --------
---------------------- - ----------------------
--------------------------------- -------
-
--上述代码中，我们使用 gesturable() 方法指定旋转操作，onmove() 方法对应在移动过程中的回调函数，通过计算角度和旋转度数实现旋转。
高级操作
除了基本的操作外，@interactjs/core 还提供了许多高级选项，如缩放限制、快捷键等。
缩放限制
我们可以使用 restrictEdges() 方法限制元素的拖拽范围，使用 restrictSize() 方法限制元素的大小范围。
-- -------------------- ---- -------
----------------
------------
---------- -
----------------------------------
------ --------
---
---------------------------------
---- - ------ ---- ------- -- --
---- - ------ ---- ------- --- -
--
-
--上述代码中，我们为 draggable() 方法添加了 modifiers 数组，其中 restrictEdges() 和 restrictSize() 方法分别指定了拖拽和缩放限制范围。
快捷键
我们可以使用 keydown() 方法为页面添加快捷键响应函数。
interact(document.documentElement)
.keydown((event) => {
if (event.keyCode === 27) {
console.log('esc pressed')
}
})上述代码中，我们使用 keydown() 方法为根元素添加了按键响应函数，当按下 ESC 键时，将打印消息到控制台。
结语
本文介绍了如何使用 @interactjs/core 库实现基本的拖拽、放缩和旋转等交互操作，并介绍了一些高级选项，如缩放限制和快捷键等。希望本文对您了解该库的使用有所帮助，欢迎反馈和探讨。
完整示例代码：
-- -------------------- ---- -------
---- ----------- ----------------- ---------- -----------
---- --
------
------- --------------------------------------------------------------
--------
-------------------
------------
---------- -
------------ -
----------------- ---------
--
----------- -
----- ------ - ------------
----- - - ------------------------------------------ -- -- - --------
----- - - ------------------------------------------ -- -- - --------
---------------------- - ------------------ --------
----------------------------- --
----------------------------- --
-
-
--
---------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2b5bee3b0ab45f74a8bb27