前言
在前端开发中,有时候需要实现拖拽布局的功能,这时候我们可以使用 ng4-gridstackstack 这个 npm 包来实现,以下是使用教程。
简介
ng4-gridstackstack 是基于 Angular 和 Gridstack.js 开发的拖拽布局组件包,可以方便快捷地实现各种拖拽布局需求。
安装
使用 npm 安装 ng4-gridstackstack,打开终端,在项目目录下输入以下命令即可进行安装:
--- ------- ------------------ ------
使用
- 在
app.module.ts
中导入 Ng4GridstackstackModule:
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------------------- - ---- --------------------- ----------- -------- --------------- ------------------------- ------------- ------ ---------- ----- -- ------ ----- --------- - -
- 在组件中使用 ng4-gridstackstack:
------ - --------- - ---- ---------------- ------ - ------------- - ---- --------------------- ------------ --------- ----------- --------- - ---------- ------------------- ------------------------------------ - -- ------ ----- ------------ - ------- - - ------- -- -- -- ---------- ---- -- ---- ----------- ---- -- ---- -------- ---- -- ------ -- ---------- --------------- - - - --- -------- -- -- -- -- ------ -- ------- - -- - --- -------- -- -- -- -- ------ -- ------- - -- - --- -------- -- -- -- -- ------ -- ------- - -- - --- -------- -- -- -- -- ------ -- ------- - - -- -
- 在模板中,添加
gridstack-item
标签,并使用ngFor
循环遍历gridItems
数组:
---------- ------------------- ------------------------ --------------- ----------- ---- -- ---------- -------------- ------------ ------------ -------------------- ----------------------- ------- ------- -------- ----------------- ------------
示例代码
以下是一个使用 ng4-gridstackstack 的示例代码:
------ - --------- - ---- ---------------- ------ - ------------- - ---- --------------------- ------------ --------- ----------- --------- - ---------- ------------------- ------------------------ --------------- ----------- ---- -- ---------- -------------- ------------ ------------ -------------------- ----------------------- ------- ------- -------- ----------------- ------------ - -- ------ ----- ------------ - ------- - - ------- -- ---------- ---- ----------- ---- -------- ---- -- ---------- --------------- - - - --- -------- -- -- -- -- ------ -- ------- - -- - --- -------- -- -- -- -- ------ -- ------- - -- - --- -------- -- -- -- -- ------ -- ------- - -- - --- -------- -- -- -- -- ------ -- ------- - - -- -
总结
使用 ng4-gridstackstack,我们可以轻松实现拖拽布局,而不需要手动写代码实现。希望本文对大家有所帮助,谢谢阅读。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6005607481e8991b448de9d7