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