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