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