概述
@leonardvandriel/interact 是一个基于JavaScript的交互库，它使得在Web应用中添加拖放、调整大小、旋转等交互特性变得非常容易。它的API简单易用，支持对多种类型元素的交互操作。本教程将详细介绍如何使用该包来实现一些常见交互。
安装
在使用 @leonardvandriel/interact 前，你需要先通过npm进行安装，打开终端并输入:
npm install @leonardvandriel/interact
基本用法
以下为一个简单的基于 @leonardvandriel/interact 的代码实例，它演示了如何将一个元素做成可拖动的：
-- -------------------- ---- -------
------ -------- ---- ----------------------------
----------------------
------------
------- -----------------
---
-------- ----------------------- -
----- ------ - -------------
----- - - ------------------------------------------ -- -- - ---------
----- - - ------------------------------------------ -- -- - ---------
---------------------- - ------------ - - - ---- - - - - ------
----------------------------- ---
----------------------------- ---
-代码中，我们首先通过import语句引入 @leonardvandriel/interact 库，并指定使用该库中的 draggble 方法，然后用 interact('.draggable') 指定将有.draggable类名的元素作为可拖动目标。
应用 dragMoveListener 函数，以响应拖动事件，这个函数是用来更新元素的位置和数据。
其他交互
除了拖动功能之外，@leonardvandriel/interact 还支持多种其他的交互特性，比如：
调整大小
以下代码为一个示例，演示如何将元素设为可调整大小的：
-- -------------------- ---- -------
------ -------- ---- ----------------------------
----------------------
------------
------ - ----- ----- ------ ----- ------- ----- ---- ---- --
--
----------------- -------- ------- -
--- ------ - -------------
--- - - ----------------------------------------- -- --
--- - - ----------------------------------------- -- --
-- ----------
------------------ - ---------------- - -----
------------------- - ----------------- - -----
-- --------- ---- -------- ---- --- -- ---- -----
- -- ---------------------
- -- --------------------
---------------------- - ------------ - - - ----- - - - ------
----------------------------- ---
----------------------------- ---
---旋转
以下代码为一个示例，演示如何将元素加入旋转效果：
-- -------------------- ---- -------
------ -------- ---- ----------------------------
----------------------
-------------
------- -------- ------- -
--- ------ - -------------
--- - - ---------------------------------------------- -- -- - ---------
---------------------- - --------- - - - -------
--------------------------------- ---
--
---总结
@leonardvandriel/interact 是一个非常易用的Web交互库，可以实现拖放、调整大小、旋转等常见交互特性。本教程通过几个简单的示例，介绍了如何充分发挥@leonardvandriel/interact的潜力，实现出丰富多彩、具有用户友好性的Web应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc8967216659e244598