简介
@wulf2468/ng2-dragula是一个基于Angular2的拖拉指令库，它使用DragulaJS库来提供强大的拖拉功能。借助该库，你可以轻松地实现复杂的自定义拖拉，从而增强你的前端交互设计。
安装
要使用@wulf2468/ng2-dragula，首先需要安装它和DragulaJS库。你可以通过npm在你的项目中安装它们：
npm install --save dragula @wulf2468/ng2-dragula
使用
使用@wulf2468/ng2-dragula很简单！只需按照以下步骤：
- 导入DragulaService：
import {DragulaService} from '@wulf2468/ng2-dragula';- 在组件或指令中注入DragulaService：
constructor(private dragulaService: DragulaService) { }- 使用dragulaService.createGroup()方法创建一个Dragula组：
this.dragulaService.createGroup('GROUP_NAME', {
option1: 'value1',
option2: 'value2'
});- 在拖拉元素上使用@wulf2468/ng2-dragula指令：
<div [dragula]="'GROUP_NAME'">Drag me around</div>
- 你甚至还可以监听事件：
this.dragulaService.drag.subscribe((value) => {
...
});
this.dragulaService.drop.subscribe((value) => {
...
});示例代码
1. 创建Dragula组
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ---------------- ---- ------------------------
------------
--------- ------
--------- -
---- ---------------------- -----------------------
---- ----------- ---- -- --------- ---- --------
------
-
--
------ ----- ------------ -
------ ----- - ------ --- ----- --- ----- ----
------------------- --------------- --------------- -
-------------------------------------- -
-------------- ----
---
-
-2. 监听drag和drop事件
-- -------------------- ---- -------
------ ----------- ---- ----------------
------ ---------------- ---- ------------------------
------------
--------- ------
--------- -
---- ---------------------- -----------------------
---- ----------- ---- -- --------- ---- --------
------
-
--
------ ----- ------------ -
------ ----- - ------ --- ----- --- ----- ----
------------------- --------------- --------------- -
-------------------------------------- -
-------------- ----
---
------------------------------------- -- -
-------------------
-- ------ - ----- --- ------ -
---
------------------------------------- -- -
-------------------
-- ------ - ----- --- ------- ------- ------- -
---
-
-结论
借助@wulf2468/ng2-dragula，你可以拥有一个强大的拖拉库，它将为你的前端界面提供卓越的交互体验，拥有丰富的选项和事件，使你能够快速实现自定义拖拉行为。现在，你可以开始使用它来改善自己的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f84238a385564ab6c30