了解gridstack.js

网上找了一圈没看见啥教学的 gridstack.js，打算自己看官网学一下，以下是我自己学习心得，以及一些新手操作。有问题的在评论区指出，会及时改正。

我去看了官网，里面啥都没有，直接点链接去了 github 上看作者写的 README.md

ps：真的很想吐槽一下这个官网

一、gridstack 介绍

官网：https://gridstackjs.com/

github 地址：https://github.com/gridstack/gridstack.js

官网基本啥都没有，github 上面是英文，google 上面翻译有问题，具体可以上 b 站上看这个网站，找了半天找到一个有效果的。

b 站翻译教学：https://www.bilibili.com/video/BV1h14y1W72m/?spm_id_from=333.337.search-card.all.click&vd_source=0d06536900dcf97a8147aeb5fa9e4030

功能：gridstack.js 是一个现代的 Typescript 库，旨在帮助开发人员仅用几行代码创建漂亮的可拖动、可调整大小、响应式引导友好的布局。您可以创建更高级的网格：允许用户保留更改、创建小部件的侧边栏以拖入您的网格，等等。

个人理解：相信学过 / 看过 Echarts 或者 antv/x6 的，对这个插件的插入以及应用应该不陌生。新建一个 html 标签，引入插件，然后 new 一个实例对象，在其中调用 API 完成它的构建，最终把他和 html 标签绑定在一起，展示在页面上。

这里要明白一个概念 Canvas 与 SVG，这里我就不多说了不明白的可以直接去查，有很多讲的很清楚的。上面提到的 Echarts 就是使用的 Canvas 来做的，简单的来讲就是设置一个画布，然后调用 Echarts 的 API 在画布上面作画，最后呈现在页面上展示；不同的是 antv/x6 使用的是 SVG，这也表明了两者的使用场景不同。这里我们学到的 gridstack 与 Echarts 相同，使用的是 Canvas 来做的。

一、gridstack 应用

1. 使用官网上的示例

特点：

1. 这里不需要跟 class 绑定，规定的就是使用 grid-stack

2. 不论是直接用子标签还是使用声明数据，再在画布上显示，看上面的 html 标签里的 style，是有默认的 gs-x、gs-y、gs-w、gs-h，当你使它放大缩小时，style 里面的 width，hight 等就会发生变化。

gs-x 行 / gs-y 列 / gs-w 宽 / gs-h 高

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);

3. GridStack.init()初始化 gridstack，里面就和其他插件一样，设置画布的规则。

4. 然后再使用 API/ 事件监听，来处理里面的数据。

ps：这里我第一次用的时候不显示，重启一下就好了。

2.gridstack 的 Options

在 Echarts 中我们就是在 Options 中填写画布的规则（选项），规定那些画布上的那些是否可以。然后再放入 myChart.setOption(option)。这里也是一样的，先设置 options 在放入其中，当然也可以直接写在其中。

官网页面：https://github.com/gridstack/gridstack.js/tree/master/doc

（1）options

这里列举常用的一些选项，具体的可以直接去看官网讲解。

• draggable—– 允许覆盖可拖动选项，默认值{handle: ‘.grid-stack-item-content’, appendTo: ‘body’, scroll: true}：）；

拖动的选项：

解释：

1. column—– 整数 > 0（默认为 12）：可以理解为这个画布的列分为 12 列，每一份占 1/12，而我们在写 x 的时候 number 就是指列。这需要注意的是，当你设置的 y 时，上面有空间时 y 轴会自动上移；而当 x 轴被占用是同理。

（2）方法

个人理解：其实你看到的插件 /VUE/React 等都好，里面有很多的 API 可以直接调用，都是作者跟你封装好了的。先 new 一个实例对象，然后往这个对象里面定义各种方法，你使用的时候，只要调用这些方法，就可以达到想要的 return/ 数据 / 标签改变。

这里也一样，画布我们已经把画布准备好了，画布的规则制定好了，接下来我们就要使用插件给我们的方法来在上面画画。

1. grid.addWidget() 添加小部件，里面的 options = {}

2. grid.load([{opts}, {opts}]) 加载，也是在其中可以添加数据，在画布上加载出来；

3. grid.updata(el: GridStackElement, opts: GridStackWidget) 更新，选定元素进行更新。

（3）事件（监听改变触发方法）

模板 grid.on(‘ 监听的事件名称 ’，执行函数)

function（）{}里面的 arguments

event：触发事件

items：项

el：元素

1. grid.on(‘change’,function(event: Event,items: GridStackNode[]){});—— 变化

2. grid.on(‘added’,function(event: Event,items: GridStackNode[])});—— 添加

3. grid.on(‘disable’,function(event: Event){});—— 禁用

4. grid.on(‘dragstart’,function(event: Event,el: GridItemHTMLElement){});—— 拖动开始

5. grid.on(‘drag’,function(event: Event,el: GridItemHTMLElement){});—— 拖动

6. grid.on(‘dragstop’,function(event: Event,el: GridItemHTMLElement){});—— 拖动结束

7. grid.on(‘dropped’,function(event: Event,previousWidget: GridStackNode,newWidget: GridStackNode){});—— 丢弃

8. grid.on(‘enable’,function(event: Event){});—— 启用

9. grid.on(‘removed’,function(event: Event,items: GridStackNode[]){});—— 删除

10. grid.on(‘resizestart’,function(event: Event,el: GridItemHTMLElement){});—— 调整大小开始

11. grid.on(‘resize’,function(event: Event,el: GridItemHTMLElement){});—— 调整大小

12. grid.on(‘resizestop’,function(event: Event,el: GridItemHTMLElement){});—— 调整大小结束

（4）全局静态 API

1. init(options: GridStackOptions = {}, elOrString: GridStackElement = ‘.grid-stack’): GridStack

2. initAll(options: GridStackOptions = {}, selector = ‘.grid-stack’): GridStack[]

3. addGrid(parent: HTMLElement, opt: GridStackOptions = {}): GridStack

4. setupDragIn(dragIn?: string, dragInOptions?: DDDragInOpt)

5. GridStack.registerEngine(engineClass: typeof GridStackEngine)

（5）应用程序接口

这里的用法也是初始化之后的 gird，然后用 grid.addWidget()，这个在上面用过一次了，就是往 grid 网格里面添加一个表格，表格的信息就是 el =》对象。我认为就是 grid 里面的方法，拿来使用即可。方法里面的的参数 = 后的是默认值。

这里只列举六个，其他的官网自查：

1. addWidget(el?: GridStackWidget | GridStackElement, options?: GridStackWidget)

创建新的小部件并返回它。选项是一个包含字段 x、y、宽度、高度等的对象

2. batchUpdate(flag = true)

在调用一堆之前使用 addWidget() 以防止中间不必要的重新布局（更有效）并获得单个事件回调。batchUpdate(false)在被调用之前，您将看不到任何变化。

3. compact()

重新布局网格项目以回收任何空白空间。

4. cellHeight(val: number, update = true)

更新当前单元格高度（请参阅 –cellHeight选项格式）。此方法重建内部 CSS 样式表（除非可选的 update=false）。注意：如果过于频繁地调用此方法，您可能会遇到性能问题。

5. cellWidth()

获取当前单元格宽度（网格宽度 / 列数）。

6. column(column: number, layout: ColumnOptions = ‘moveScale’)

设置网格中的列数。将更新现有的小部件以符合新的列数，并缓存原始布局，以便您可以恢复到以前的位置而不会丢失。

三、使用 gridstack 示例

这里复刻一下官网使用 gridstack.js 的案例

未实现的功能：

1. 拖进去删除，这里用的是 drag 事件来实现的，拖动里面单个的不触发事件，只有加上一个 button，通过点击 grid.on(‘removed’,function(）{}）来删除这个 item

2. 拖进去不是和官网一样，下面有一片阴影，拖到哪里放在那里；这里是有空间就放在鼠标的位置，没有就放在最后

解决的办法：看了案例，官网上面不是通过拖拽事件监听来实现，gridstack 里面就有方法可以实现；应该是左右两边都是 grid-stack，然后通过拖放事件，来进行增减。

注意：标签上面的和 addWidget{}/load{}等里面的不同

标签里面的：gs-no-resize=”true” gs-no-move=”true” gs-locked=”true”

方法里面的： noResize: true, noMove: true

这里的颜色设置：全局设置 / 全局穿透（权重）设置都可以

四、官网 gridstack 示例

这里的代码打开检查就可以看见了，其他地方我好像找了一下是没有的

这里是复制的效果图

注意：这里没有使用任何的拖拽 drag 的命令，完全就是使用 gridstack.js 的配置 Options 来实现的。具代码如下：