项目介绍
Gridstack.js是一个专注交互式仪表板Typescript库，用于仪表板布局和创建，只需几行代码就可以帮助开发人员 创建漂亮的可拖动、可调整大小、响应式布局。非常合适做一些可视化页面布局，让用户可以自定义某些图表的展示区域。
支持Angular、React、Vue、Knockout.js、Ember等框架 使用起来也简单，号称在几分钟内构建交互式仪表板。
网址：
官网：https://gridstackjs.com/
文档：https://github.com/gridstack/gridstack.js/blob/master/README.md
github：https://github.com/gridstack/gridstack.js/
功能说明：
全面的移动支持
轻松制作响应迅速、适合移动设备的应用程序。
可拖动和可调整大小的元素
具有交互式组件的直观界面。
轻松拖放
从侧边栏动态管理内容以进行插入和 删除。
响应式、基于列的布局
设计适应性强且具有视觉吸引力的网页布局。
保存和恢复功能
轻松保留和恢复到以前的布局。
网格间交互性
在多个网格中拖动项目以实现复杂的布局 管理。
嵌套网格
动态创建和操作嵌套网格到任何深度。
广泛的框架支持
原生 Angular 支持，以及 Vue、React、 余烬、Knockout.js等。
使用方法
通过复制粘贴 HTML+JS 创建您的第一个交互式网格，如 见下文...
npm install gridstack
然后，在 HTML 文件中，包含以下代码...
<script src="node_modules/gridstack/dist/gridstack-all.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<style type="text/css">
.grid-stack { background: #FAFAD2; }
.grid-stack-item-content { background-color: #18BC9C; }
</style>
<div class="grid-stack"></div>
<script type="text/javascript">
var items = [
{content: 'my first widget'}, // will default to location (0,0) and 1x1
{w: 2, content: 'another longer widget!'} // will be placed next at (1,0) and 2x1
];
var grid = GridStack.init();
grid.load(items);
</script>