概述
@bhobbs/ng2-dragula 是一个 Angular 拖拽 UI 组件库,它基于 dragula 库而来,并且依赖于 ng2 和 RxJS。
安装
使用 npm 安装:
--- ------- ------ -------------------
使用
- 在需要使用拖拽组件的模块中引入 ng2-dragula:
------ - ------------- - ---- ---------------------- ----------- -------- - -- --- ----------------------- -- -- --- -- ------ ----- --------- - -
- 在组件模板中使用 ng2-dragula:
---- --------------------- ------------------------- ---- ----------- ---- -- --------------------- ------
- 在组件类中初始化和监听拖拽事件:
------ - -------------- - ---- ---------------------- ------------ -- --- -- ------ ----- ----------- ---------- ------ - ----- - ------ --- ----- --- ----- ---- ------------------- --------------- --------------- - - ---------- - ------------------- ---------------- ------------- -- -- -- - ----------------------------- --- ------------------- ---------------- ------------- -- -- -- - -------------------------------- --- - -
示例
下面是一个基础的拖拽示例:
---- --------------------- ------------------------- ---- ----------- ---- -- --------------------- ------
------ - -------------- - ---- ---------------------- ------------ -- --- -- ------ ----- ----------- ---------- ------ - ----- - ------ --- ----- --- ----- ---- ------------------- --------------- --------------- - - ---------- - ------------------- ---------------- ------------- -- -- -- - ----------------------------- --- ------------------- ---------------- ------------- -- -- -- - -------------------------------- --- - -
总结
@bhobbs/ng2-dragula 提供了一种轻松集成和使用拖拽 UI 组件的方式,能够让开发人员快速实现可拖拽的交互功能。此外,它还支持多种配置和监听拖拽事件,可以满足开发中各种复杂场景的需求。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600668efd9381d61a3540d18