概述
@bhobbs/ng2-dragula 是一个 Angular 拖拽 UI 组件库，它基于 dragula 库而来，并且依赖于 ng2 和 RxJS。
安装
使用 npm 安装：
npm install --save @bhobbs/ng2-dragula
使用
- 在需要使用拖拽组件的模块中引入 ng2-dragula：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------
-----------
-------- -
-- ---
-----------------------
--
-- ---
--
------ ----- --------- - -- 在组件模板中使用 ng2-dragula：
<div [dragula]='"bag-one"' [(dragulaModel)]='items'>
<div *ngFor="let item of items">{{item}}</div>
</div>- 在组件类中初始化和监听拖拽事件：
-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
------------
-- ---
--
------ ----- ----------- ---------- ------ -
----- - ------ --- ----- --- ----- ----
------------------- --------------- --------------- - -
---------- -
-------------------
----------------
------------- -- -- -- -
-----------------------------
---
-------------------
----------------
------------- -- -- -- -
--------------------------------
---
-
-示例
下面是一个基础的拖拽示例：
<div [dragula]='"bag-two"' [(dragulaModel)]='items'>
<div *ngFor="let item of items">{{item}}</div>
</div>-- -------------------- ---- -------
------ - -------------- - ---- ----------------------
------------
-- ---
--
------ ----- ----------- ---------- ------ -
----- - ------ --- ----- --- ----- ----
------------------- --------------- --------------- - -
---------- -
-------------------
----------------
------------- -- -- -- -
-----------------------------
---
-------------------
----------------
------------- -- -- -- -
--------------------------------
---
-
-总结
@bhobbs/ng2-dragula 提供了一种轻松集成和使用拖拽 UI 组件的方式，能够让开发人员快速实现可拖拽的交互功能。此外，它还支持多种配置和监听拖拽事件，可以满足开发中各种复杂场景的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668efd9381d61a3540d18