快速入门

通过复制粘贴 HTML+JS 创建您的第一个交互式网格，如下所示...

---

代码获取

npm install gridstack
然后在 html 中：
<script src="https://gridstackjs.com/node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="https://gridstackjs.com/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>

    

...就是这样！ 拖放和调整大小以满足您的需求。 寻找更复杂的例子？ 查看下面的高级示例、导航栏中的链接或我们在 GitHub 中的文档。 寻找更复杂的例子？ 查看下面的高级示例、导航栏中的链接或我们在 GitHub 中的文档