在前端开发中，drag and drop是一个常见的功能，而ng2-dragula-ng-packagr是一个方便易用的npm包，可以用于实现这个功能。在这篇文章中，我们将介绍ng2-dragula-ng-packagr的使用方法，并提供示例代码。
什么是ng2-dragula-ng-packagr
ng2-dragula-ng-packagr是Angular的一个轻量级拖放库。它提供了一个灵活的API，使您可以轻松地创建交互式的拖放操作。ng2-dragula-ng-packagr是基于dragula库的一个Angular 2/4/5包装器。它还提供了一些非常酷的特性，如支持touch和滚动容器。
安装ng2-dragula-ng-packagr
在使用ng2-dragula-ng-packagr之前，首先需要安装它。安装ng2-dragula-ng-packagr非常简单，只需要执行以下命令：
npm install ng2-dragula-ng-packagr --save
使用ng2-dragula-ng-packagr
了解了ng2-dragula-ng-packagr的基本信息之后，接下来让我们看一下它的实际应用。
首先，在您的应用程序中导入ng2-dragula-ng-packagr：
import { DragulaModule } from "ng2-dragula-ng-packagr";接下来，在NgModule中将DragulaModule添加到imports数组中：
@NgModule({
imports: [
BrowserModule,
DragulaModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})现在您已经成功地安装和配置了ng2-dragula-ng-packagr，下面是具体的使用方法。
基本用法
将以下HTML代码添加到您的组件模板中：
-- -------------------- ---- -------
---- ----------------- ------------------------
-------- ----- -------------
-------- ------ -------------
-------- ----- -------------
------
---- ----------------- ------------------------
-------- ------ -------------
-------- ----- -------------
-------- ----- -------------
------自定义操作
要定义自定义操作，您需要定义一个DragulaService。以下是一些示例代码：
-- -------------------- ---- -------
------ - -------------- - ---- -------------------------
------------
--------- -----------
--------- -
---- ----------------
---- ----------------- --------------------- -------------------------
---- ----------- ---- -- --------- ---- --------
------
---- ----------------- ----------------------
--------- -- ------- ---------------
------
------
-
--
------ ----- ------------ -
------ ------ ------------- - ---
------------------- --------------- --------------- -
------------------------------------- -- -
-- -- ---------
---
------------------------------------- -- -
-- -- ---------
---
------------------------------------- -- -
-- -- ---------
---
------------------------------------ -- -
-- -- ---------
---
-
-控制器
您还可以通过定义控制器来控制拖放操作。以下是示例代码：
-- -------------------- ---- -------
------ - ----------------- - ---- -------------------------
------------
--------- -----------
--------- -
---- ----------------
---- ----------------- --------------------- -------------------------
---- ----------- ---- -- --------- ---- --------
------
---- ----------------- ----------------------
--------- -- ------- ---------------
------
------
-
--
------ ----- ------------ -
------ ------ ------------- - ---
------------------- --------------- --------------- ------- ------------------ ------------------ -
---------------------------------------- -
-------------- ----
---
------------------------------------- -- -
----------------------------
---
------------------------------------- -- -
----------------------------
---
------------------------------------- -- -
----------------------------
---
------------------------------------ -- -
---------------------------
---
-
------- ------------ -
--- --- --- - -----
-- -- ---------
-
------- ------------ -
--- --- --- - -----
-- -- ---------
-
------- ------------ -
--- --- --- ---------- - -----
-- -- ---------
-
------- ----------- -
--- --- --- ---------- - -----
-- -- ---------
-
-总结
ng2-dragula-ng-packagr是Angular的一个非常实用的npm包，为前端开发人员提供了一种最简单的方式来实现拖放操作。在这篇文章中，我们介绍了ng2-dragula-ng-packagr的安装方法和基本用法，同时我们还提供了自定义操作和控制器操作的示例代码。我们希望这篇文章对您有所帮助，让您能够更加轻松地使用ng2-dragula-ng-packagr。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822cde