前言
在前端开发中，用到拖拽功能的场景十分常见，很多人早已习惯使用原生拖拽 API 来写拖拽功能。但是，原生 API 并不够灵活，同时难以满足需求。这时，使用一款拖拽优秀的第三方库可以更好地实现我们的功能。
本篇文章将介绍一款强大的拖拽库——angular-greensock-draggable，并且提供详细的使用教程。
什么是 angular-greensock-draggable？
angular-greensock-draggable 是一款基于 Angular 平台，使用 GreenSock 动画库开发的拖拽库。该库功能强大，可以帮助我们快速、精准地实现拖拽功能，并且可以对拖拽的目标作出很多动画效果。
安装和使用
安装
首先需要在本地安装 angular-greensock-draggable，可以使用 npm 进行安装：
--- ------- --------------------------- ------
使用
import模块
------ - --------- - ---- ------------------------------
- 注册模块
如下所示，将模块添加到 imports 数组中：
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------- - ---- ------------------------------ ------ - ------------ - ---- ------------------ ----------- ------------- --------------- -------- --------------- ----------- ---------- --- ---------- --------------- -- ------ ----- --------- --
- 在 HTML 文件中使用
---- ----------- ------------ ---------- ------
在使用中，gsDraggable 是必要的指令，使用它能够开启拖拽功能。同样的，类名前面的 gs 也是必不可少的，他们代表了 GreenSock，并确保指令有效。
选项
下列是 angular-greensock-draggable 可以使用的选项：
bounds
用来限制拖动的范围。值可以是 DOM 元素的引用，也可以是 CSS 选择器：
---- ----------- ----------- ------------------------ ---------- ------
dragClickables
允许在指定的区域内单击而不触发拖拽事件。这在特殊要求中非常有用，如在输入框等区域内不触发拖拽事件：
---- ----------- ----------- ----------------------------- ---------- ------ ----------- ------------------ ------
draggableOver
当拖动源与目标元素重合时触发的回调函数：
----------------- -
-- -----
-------------------
----- ----------- ----------- ----------------------------- ---------- ------
edgeResistance
拉拽到屏幕边缘时触发反弹效果：
---- ----------- ----------- ----------------------- ---------- ------
动画
angular-greensock-draggable 的另一个优点是能够非常容易地用 GreenSock 来制作动画。
------ - ---------- --------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
------------- -
-------------------- -- -
---------------- ----------
------ ----
----- ---------------
---
-
-示例代码
下面是一个完整的例子，包含了选项和动画：
------ - --------- - ---- ----------------
------ - ---------- --------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----------------- -
-------------------
-------------------- -- -
------ ----
----- ---------------
---
-
---------------- -
-------------------
-------------------- -- -
------ --
----- ----------------
---
-
----- ------------------
---- ----------- -----------
----------------------
-----------------------
----------------------------
----------------------------
--------------------------
-
----------
------ ----------- ------------------
------
------结语
angular-greensock-draggable 是一种非常好用的库，可以帮助我们快速地实现拖拽与动画效果。希望本篇文章能够对你的实际开发有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600559dd81e8991b448d75fc