简介
ng2-dragula 是一个 Angular 2 的拖放库，使得在网页上实现拖放功能变得容易快捷。它是 dragula 库的 Angular 2 绑定版本，是一个开源的 npm 包，可在你的 Angular 2 项目中轻松使用。
安装
在终端中输入以下命令安装 ng2-dragula：
--- ------- -----------
使用
首先，把 DragulaService 和 DragulaDirective 引入到你的组件当中：
------ - --------- - ---- ----------------
------ - -------------- - ---- --------------
------ - ---------------- - ---- --------------
------------
--------- ---------------
--------- -
---- -------------------- -----------------------
---- ----------- ---- -- ---------------------
------
--
----------- ------------------
--
------ ----- ----------- -
------ ---------------- - -
--------
---------
---------
-------
-----------
-----
--
------------------- ------------------------------ -
----------------------------------- -
-------------- -----
---
-
-以上代码通过将 DragulaDirective 应用于包含 div 元素的 HTML 模板实现了拖放。dragula 属性指定了使用的组名称和模型名。 dragulaService 中的 setOptions() 方法可用于配置选项，例如此处使用了 removeOnSpill 参数，表示当拖动对象被放置时它不会被移除。
指南
ng2-dragula 提供了以下操作：
- 将对象从一个容器中拖到另一个容器
- 在同一容器中重新排序对象
为实现拖放操作，必须：
- 添加 DragulaDirective
- 创建或使用一个或多个容器来承载可拖动元素
- 针对容器设置 dragula 属性
- 可选的进行配置
详解
我们将根据上述操作列表深入了解 ng2-dragula 的使用。
添加 DragulaDirective
要使用 ng2-dragula，第一步是将其导入到组件中：
------ - ---------------- - ---- --------------
随后把 DragulaDirective 添加到组件的 directives 数组中：
----------- - ---------------- -
创建容器
容器是指在 HTML 中需要进行拖放交互的元素。通常情况下，容器可以是一个列表、一个树形结构、一个项目区域等。
-----
--- ------------------------
-------- ------
-------- ------
-------- ------
-----
--- ------------------------
-------- ------
-------- ------
-------- ------
-----
------以上代码以无序列表的形式展示了两个容器，它们有相同的 dragula 属性，表明它们属于同一个组。这同样适用于拥有相同 dragula 属性的任何 HTML 元素。
配置
ng2-dragula 可以通过 setOptions() 方法进行配置。例如，加入下面代码可使拖动对象在被拖动时不消失：
------ - -------------- - ---- --------------
------------------- -------------- - --------------- -
-------------------------------- -
-------------------
---
-这里我们配置了旗下组名为 bag 的拖放操作，在拖动对象被释放时设置了 removeOnSpill 选项为 false，这意味着当被拖动对象被释放后，它不会被自动从 DOM 中删除。
拖放模型
您可以使用 Angular 2 的 ngModel 和 ngFor指令实现一个拖放模型。其工作原理类似于组件中的数据模型，为 HTML 元素与组件中的代码提供了绑定关系。
---- -------------------- ----------------------- ---- ----------- ---- -- --------- ---- -------- ------
这里使用了 dragula 和 dragulaModel 指令，其中 dragula 指定了组名称，并且 dragulaModel 与组件代码中的 items 模型进行了绑定。在 for循环内，使用 item 显示列表中的每个项目。
事件
ng2-dragula 还提供了一些事件，可以在拖放的过程中或者结束时触发。事件的处理方式与 Angular 2 中常规事件的处理方式相同，只需为容器代码指定事件处理程序即可。
以下代码演示了如何在拖动元素时在控制台上输出信息：
------------------- ------------------------------ -
----------------------------------------- -- -
------------------ --------------
---
-在该代码中，我们使用了 drag 事件，并把 console.log() 作为一个订阅者。在控制台上，您可以看到有关运动中拖动对象的信息。
示例代码
该例子实现了在多个 div 元素之间进行拖放。当拖放操作完成时，使用了一个小动画来演示交互。这里使用的是 ng2-dragula 和 Angular 2。
------ - ---------- ----------------------- - ---- ----------------
------ - -------------- - ---- --------------
------------
---------------- -------------------------------
--------- -----------
---------- -----------------
------------ -------------------------
--
------ ----- ---------------- -
------------------- - -
---- ---------- ----- -----------
---- ---------- ----- -------- ----------
---- ------- ----- --------
---- ------- ----- --------
---- ------- ----- ----------
---- --------- ----- ----------
---- --------- ----- ----------
---- ---------- ----- -------- --------
---- -------- ----- ------ --------
---- ------- ----- ----------
--
----------------- - -
---- -------- ----- ------ ---------
---- ------- ----- ----- -------
---- -------- ----- ------ -------
---- ------- ----- ------ ---- ----------
---- -------------- ----- ---------------
---- ------ ----- ---- ----------
---- --------- ----- ----------
---- -------- ----- ---------
---- ------- ----- ----- -----------
---- ------ ----- -------
---- ------ ----- ------
--
-- --- --- --------- ---- -- ----- -- ----------- ----- ------ ---- --- ------- -------
-----------------------------
---------------------------
------------------- ------------------------------ -
----- ----------- - ---------------
----- --------- - -------------
--------------------------------------- -
-------- ---- ------- ------- -----------
------ ------- --- ----- -- -------- -- --- ---- -------- -- ---
-
---
------------------------------------- -
-------- ---- ------- ------- -----------
------ ------- --- ----- -- -------- -- --- ---- -------- -- ---
-
---
---------------------- - ----------------------
-------------------- - --------------------
------------------------------------- -- -
-- ---- -- ---- --- --- -- --------
-- --- ----- -- - ----- --- --- ----
--- ------ - ---------
--- ------ - ---------
--- ----------- - ----------------
--- ----------- - ----------------
--- ---- - ----------------------
-- ----- ------ ---------- --- ------- ----- -- --- -------
----------------
---------------------------- ---
---------------------------- -- ------
-- ---
---
-
-以下是示例代码的 HTML 模板：
----
----------- - -------- --- ------------
-----
------------- -------------
---- ---------------------- ---------------------------
---- ----------- ---- -- -------------------
---- ----------------------------
-------------
------
------
------
---------------------
---- ----------------------- -------------------------
---- ----------- --- -- -----------------
---- -----------------------------
------------
------
---- ---------------------------------
------------
------
------
---- ----------- --- -------- ------- --- ------ ---
---- ---------------------------- ----------------------------
------示例代码运行效果如下：
总结
ng2-dragula 是一个简单易用、灵活的拖放库，使用起来非常方便，可以极大地减少开发时间。本篇文章详细介绍了 ng2-dragula 的安装与使用，对于正在学习 Angular 2 的开发者来说，是一个非常不错的选择。希望这篇文章能对大家进行介绍、指导和启发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/ng2-dragula