ng2-dragula-base 是 Angular2 Dragula 的基本包装，它让 Angular2 的拖放操作变得异常简单。本文将介绍如何使用 ng2-dragula-base，包括安装、引用以及具体应用。
安装
首先，你需要打开终端并输入以下命令：
npm install --save ng2-dragula-base
引用
在安装后，你需要将 DragulaModule 加入到你的 NgModule 中。具体地，你需要打开 app.module.ts 并添加以下内容：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------- - ---- -------------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -应用
现在，我们可以在组件中使用 DragulaService 和 DragulaDirective 来实现拖放功能了。以下代码实现了当拖动源区块释放时，它的位置将和目标区块相同。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - --------------- ---------------- - ---- -------------------
------------
--------- -----------
--------- -
---- ----------------
---- --------------------- ------------------------
--------- -------
--------- -------
--------- -------
------
---- --------------------- ------------------------------
------
-
--
------ ----- ------------ -
------------------- --------------- --------------- -
------------------------------------------ -- -
-- -------------------
---------------------------------
---
-
----------------- -
--- ---- ------- ------- - -----
--- ----------- - -------------------------------
--- ----------- - -------------------------------
--- ----------- - ------------------------
--- ----------- - ------------------------
------------------------------- -- ------------------------------- -------
-
--------------------- -
------ ------------------------
-
-在这个示例代码中，我们创建了两个区块，每个区块都有一些项目。当你将一个项目从一个区块移到另一个区块时，这个项目的位置将在它的源区块中被删除，并在目标区块中按顺序插入。也就是说，如果你将 Item 3 移到第一个区块中，那么它将排在 Item 2 的后面。
总结
得益于 ng2-dragula-base 的使用，我们可以轻松实现 Angular2 的拖放功能。通过本文的介绍和示例，相信您已经理解了 ng2-dragula-base 的基本使用，下一步就是尝试在您自己的项目中使用它来打造更加强大的应用！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7681e8991b448e5f44