介绍
Interact.js 是一个非常好用的基于 JavaScript 的交互式单页应用程序解决方案，它可以帮助开发人员轻松创建可重用和直观的网页 UI 功能。 除了可以使拖放、缩放和旋转等交互式效果变得更加容易，它还能够快速处理选项卡、轮播、滑块和互动式图片相册等界面组件。
安装
你可以通过 npm 指令来安装 interactjs 包，打开控制台并输入以下内容：
--- ------- ----------
基本使用
如果要在项目中启用 Interact.js ，只需在 HTML 代码中包含 interact.js 文件，如下所示：
--------- -----
------
------
----- ----------------
------------------ ------------
------- ---------------------------
-------
------
---- -------------------------
--------
-- ------
--------------------
------------
------- ----------------
---
-------- ---------------- ------- -
--- ------ - -------------
-- ---------
--- - - ------------------------------------------ -- -- - ---------
--- - - ------------------------------------------ -- -- - ---------
-- ----
---------------------------- - ---------------------- -
------------ - - - ---- - - - - ------
-- ----
----------------------------- ---
----------------------------- ---
-
---------
-------
-------在此示例中，我们将一个 ID 为 dragDiv 的 <div> 元素设置成可拖动的，实现了一个简单的拖拽效果。
功能示例
Interact.js 有很多功能可以使用，以下是些常见案例：
拖拽
----------------------
------------
---------- -
---------------------------------
------------ --------
--
--
-------- -----
----------- -----
------- ----------------
------ -------- ------- -
--- ------ - --------------------------------
------ -- ------------------- -
------ - -------- -- -
- ------------------------------- - --------- -- -
-------------------- - --------- -- - ---
----------- - ------
-
--上述代码段通过 interact().draggable() 能够将任何 HTML 元素转换为可拖拽的。 这个例子基于拖曳的示例，在此演示了如何添加一些功能，如在拖曳时保持元素在 parent 内部限制，惯性滚动以及波纹材质效果。
可调整大小
---------------------------------------
-- -----
------- -----
-------------- -
------ ---------
-------- -----
--
-------- -----
---
----------------------------------
---------- -
---------------------------------
------------ ---------
-------- -----
---
--
-------- -----
---这个例子通过 interact().resizable() 方法将任何 HTML 元素转化成可调整大小的元素。 在此示例中，当用户尝试缩放或调整大小时，它将遵循其父元素的限制。
总结
本文提供了 Interact.js 在浏览器客户端中的快速上手指南，以及一些演示拖拽和调整大小的增强功能示例。通过此文，你可以在短时间内快速上手 Interact.js ，并将它应用在你的项目中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedb4dcb5cbfe1ea0611370