前言
随着前端技术的不断发展，现在有越来越多的组件库可用于开发 Web 应用，其中一个比较流行的是 Angular，而在 Angular 中使用拖拽功能，就需要使用到 ng2-dragula-dreebit 这个 npm 包。该包提供了非常方便和易用的接口和配置，能够快速帮助我们实现各种拖拽效果。
安装和使用
安装
在使用 ng2-dragula-dreebit 之前，需要进行安装，可通过如下命令进行安装：
npm install ng2-dragula-dreebit --save
安装完成后我们就可以在项目中使用 ng2-dragula-dreebit 了。
使用
在开始使用之前，我们首先需要在项目中引入 ng2-dragula-dreebit 包。我们可以在 app.module.ts 文件中进行配置，如下：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -以上代码中，我们首先将 DragulaModule 引入到 app.module.ts 文件中，然后在 imports 中加入该模块。
接下来，我们就可以在组件中使用该模块提供的拖拽服务了。我们可以自由地拖放各个元素，比如列表、面板等。
HTML 模板
在 HTML 模板中，我们需要通过指令来启用拖放功能，如下：
<div [dragula]='"first-bag"' [dragulaModel]='items'>
<div *ngFor='let item of items'>
{{item}}
</div>
</div>以上代码中，我们首先设置 dragula 的名称为 first-bag，然后通过模板驱动的方式绑定 dragulaModel 属性为 items 数组，以实现拖拽动作。最后，在 div 中通过 ngFor 循环渲染各个元素。
TypeScript 代码
在 TypeScript 中，我们需要使用 DragulaService 提供的方法来注册各个元素，如下：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
------ ----- -------------
----- - --------- --------- --------- --------- ----------- ----------
------------------- --------------- --------------- -
--------------------------------------- -
-------------- -----
---
-
-以上代码中，我们首先在构造函数中注入 DragulaService 服务，然后在 createGroup 中注册名称为 first-bag 的拖放组。同时，我们也可以设置其他的属性，如 removeOnSpill 表示在拖放元素时是否可以将元素放回原来位置。
总结
ng2-dragula-dreebit 提供了非常方便的接口和配置，能够帮助我们快速实现各种拖拽效果。通过本文的介绍，相信大家对如何使用该模块有了更好的理解。希望大家在实践中能够顺利运用，提升 Web 应用的性能和用户体验。
示例代码
<div [dragula]='"first-bag"' [dragulaModel]='items'>
<div *ngFor='let item of items'>
{{item}}
</div>
</div>-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
------ ----- -------------
----- - --------- --------- --------- --------- ----------- ----------
------------------- --------------- --------------- -
--------------------------------------- -
-------------- -----
---
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558ce81e8991b448d6186