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