介绍
@joaopmerlin/ng2-dragula 是一个 Angular2 的拖拽库，它的使用方法简单且功能强大，可以帮助我们实现一些高级的拖拽效果。同时，它并没有像其他拖拽库那样追求更多的外部依赖，使得其在轻量化的前端项目中具有更好的适用性。
安装
在您的项目中，您需要首先安装该库：
--- ------- ------------------------ ------
使用
在您的 Angular2 项目中，您需要首先引入 DragulaModule：
------ - ------------- - ---- ---------------------------
然后，在您项目的模块中 import 该模块，使其对整个项目有效：
-----------
-------- -
---
-----------------------
--
---
--
------ ----- ---------- - -现在，您已经成功将 @joaopmerlin/ng2-dragula 集成到您的项目中了！
示例
下面，让我们使用一个简单的示例来介绍 @joaopmerlin/ng2-dragula 的使用。
首先，在 HTML 中准备好可以拖拽的元素：
---- ----------------- -------------- ------- ---- ----------------- -------------- ------- ---- ----------------- -------------- ------- ---- ----------------- -------------- -------
然后，在 TypeScript 中为其添加拖拽和释放的事件处理：
------ - ---------- ------ - ---- ----------------
------ - -------------- - ---- ---------------------------
------------
--------- -----------
--------- -
---- ----------------- -------------- -------
---- ----------------- -------------- -------
---- ----------------- -------------- -------
---- ----------------- -------------- -------
-
--
------ ----- ------------ ---------- ------ -
------------------- --------------- --------------- - -
----------- ---- -
---------------------------------------- -- -
------------------ --------------
---
---------------------------------------- -- -
------------------ --------------
---
-
-这里，我们分别为 drag 和 drop 事件添加了 log，以便在拖拽和释放时记录信息。
接下来，在 app.module.ts 中注册该组件：
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- ---------------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -最后，使用 Angular CLI 启动项目：
-- ----- ------
现在，您可以尝试拖动 Element 1 至 Element 3 等进行测试了。
@joaopmerlin/ng2-dragula 提供了更多的高级拖拽功能以及可配置选项，您可以根据您的具体需求进行选择和学习。同时，我们也需要注意到，拖拽在 Web 前端项目中的使用非常广泛，因此，学会如何使用 @joaopmerlin/ng2-dragula 不仅仅对于您的项目开发有意义，也对于您的前端职业发展有着重要指导意义。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005755e81e8991b448ea537