在前端页面中，实现拖拽效果是常见的需求。而npm包angular-dragula正是一个非常方便且易于使用的工具，通过它我们可以轻松地实现拖拽效果。
安装
首先，在项目目录下打开终端窗口，输入以下命令进行安装：
npm install angular-dragula
引入模块
在需要使用angular-dragula的组件中，需要引入该模块并将其添加到组件的imports数组中：
-- -------------------- ---- -------
------ - ------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用示例
下面我们通过一个实际的示例来演示如何使用angular-dragula。
HTML
<div class="container">
<div class="wrapper" dragula="'bag-one'" [(dragulaModel)]="items">
<div *ngFor="let item of items">{{ item }}</div>
</div>
</div>在HTML中，我们定义了一个容器div，其中包含了一个wrapper元素，并且我们将dragula指令添加到了wrapper元素上。dragula指令的参数'bag-one'代表了这个容器的名称，可以自由命名。指令中的[(dragulaModel)]="items"表示我们将要拖拽的元素绑定到了一个叫做items的数组上。
TypeScript
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----- - ------ --- ----- --- ----- --- ----- ----
------------------- --------------- --------------- -
-------------------------------------------
-
-在TypeScript文件中，我们创建了一个名为AppComponent的组件，并在其中定义了一个名为items的数组。在组件的构造函数中，我们通过DragulaService服务创建了一个名为'bag-one'的容器组，并将其添加到了该组件的作用域中。
指导意义
通过使用angular-dragula，我们可以非常方便地实现前端页面中的拖拽效果，而无需编写大量的样式和脚本代码。同时，该库的使用也非常简单明了，只需要几行代码即可完成拖拽功能的实现。
此外，对于初学者而言，在学习angular-dragula的过程中，我们还可以掌握Angular框架的相关知识，例如如何在组件中引入模块、如何使用组件作用域等。因此，学习angular-dragula不仅可以帮助我们快速实现拖拽效果，还可以提高我们对于Angular框架的理解和掌握程度。
完整代码：
HTML：
<div class="container">
<div class="wrapper" dragula="'bag-one'" [(dragulaModel)]="items">
<div *ngFor="let item of items">{{ item }}</div>
</div>
</div>TypeScript：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- ------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
--
------ ----- ------------ -
----- - ------ --- ----- --- ----- --- ----- ----
------------------- --------------- --------------- -
-------------------------------------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/36401