简介
ng2-dragula-edit 是一个基于Angular2的拖拽组件，可以快速搭建拖拽操作的界面。它支持几乎所有主流浏览器，包括桌面和移动设备。 本文将介绍如何使用ng2-dragula-edit。
安装ng2-dragula-edit
你可以使用npm来安装ng2-dragula-edit：
npm install ng2-dragula-edit --save
使用ng2-dragula-edit
在编写代码前，需要先导入 DragulaModule 和 DragulaService。
import { DragulaModule } from 'ng2-dragula-edit';
import { DragulaService } from 'ng2-dragula-edit';要使用 DragulaModule，需要在你的应用程序中导入它：
-- -------------------- ---- -------
-----------
-------- -
--------------
-----------------------
--
------------- -
------------
--
---------- -
--------------
--
---------- --------------
--
------ ----- --------- - -在 HTML 中，使用 dragula 指令来创建面板，并使用 dragulaModel 指令来添加属性。
<div [dragula]='"first-bag"' [dragulaModel]='items'>
<div *ngFor='let item of items'>
{{ item }}
</div>
</div>我们也可以定义多个容器：
<div class='wrapper'> <div [dragula]='"first-bag"' [dragulaModel]='items1'></div> <div [dragula]='"second-bag"' [dragulaModel]='items2'></div> </div>
并初始化模型：
export class AppComponent {
items1 = ['Item 1', 'Item 2', 'Item 3'];
items2 = ['Item 4', 'Item 5', 'Item 6'];
}交换拖拽时需要做一些处理，使用 DragulaService 来监听事件：
-- -------------------- ---- -------
----------------------------------------
------- -- -
-------------------------------- ----------
-
--
----------------- ----- -
-- -- ---------
-完整示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------
------------
--------- -----------
--------- -
---- ----------------------- -----------------------
---- ----------- ---- -- -------
-- ---- --
------
------
---- ------------------------ ------------------------
---- ----------- ----- -- --------
-- ----- --
------
------
-
--
------ ----- ------------ -
----- - -------- ------- ---------
------ - -------- ---------- ------------
------------------- --------------- --------------- -
------------------------------------------ -- -
-------------------------------- ----------
---
-
------- ----------------- ----- -
-- -- ---------
-
-结语
ng2-dragula-edit 是一个非常好用的拖拽组件，帮助我们快速创建交互界面。本文已经介绍了如何在 Angular2 应用程序中使用 ng2-dragula-edit，希望对大家能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555ed81e8991b448d2f76