简介
Angular-Drag-Bounce是一个基于AngularJS的npm包，可以用来实现拖拽回弹等效果。本文将为您详细讲解该npm包的使用方法和原理。
安装
要使用Angular-Drag-Bounce，首先需要将该npm包安装到你的项目中。安装方式如下：
--- ------- ------------------- ------
安装成功后，在项目的package.json文件中会出现以下记录：
-
--------------- -
---------------------- --------
-
-使用
安装成功后，你就可以开始使用Angular-Drag-Bounce了。首先需要在你的HTML文件中引入该npm包并声明依赖：
--------- -----
------
------
------------------------------------
---- ---------------------------------------- ---
------- --------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------
-------
----- -----------------
---- -------------------------
---- -------------------- ---
---- -----------------
------
-------
-------然后，在JS文件中声明demoApp和demoCtrl：
------------------------- ----------------- ----------------------- ---------------- - ------ ---
这样，你就完成了Angular-Drag-Bounce的初始化，可以在HTML中进行拖拽了。
API
bouncy- 在HTML标签上声明，开启该标签的拖拽回弹。
原理
Angular-Drag-Bounce的实现是基于HTML5中的拖拽API和CSS3中的动画动效。
当我们按下鼠标左键并开始拖动标签时，开始触发拖拽事件，其事件处理程序会将鼠标的位置与标签的位置进行比较，从而实现标签的随鼠标移动。当我们松开鼠标左键时，完成拖拽事件，回调函数会将拖拽过程中的鼠标位置和标签位置作为参数，通过CSS3中的动画和动效计算出标签最终停留的位置，并完成回弹效果。
示例代码
--------- -----
------
------
------------------------------------
---- ---------------------------------------- ---
------- --------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------
-------
------------ -
------ ------
------- ------
----------------- --------
------ ------
----------- -------
------------ ------
------- --------
--------- ---------
----- --
---- --
---------- ------ -- ---------
-
---------- ------ -
-- -
---------- ----------------
-
--- -
---------- -----------------
-
---- -
---------- ----------------
-
-
--------
-------
----- ------------------------
---- -------------------------------
---- ------------------- -----------------
------
--------
-------------------------------- -----------------
----------------------------- ---------------- -
-- -- ---------
---
---------
-------
-------结语
Angular-Drag-Bounce是一个实现拖拽回弹效果的npm包，使用起来相对简单，只需要在HTML标签上声明bouncy属性，即可完成拖拽回弹效果。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cbb81e8991b448e62f0