vue3-drr-grid-layout 中文文档

vue3-drr-grid-layout 是 gridster.js 的 vue3 版本的网格布局插件,可以实现单元格的拖拽排序和布局,通常我们可以用vue3-drr-grid-layout来实现自定义工作台、看板这类功能。

vue-grid-layout 外部拖入单元格

本文演示 vue-grid-layout 外部拖入单元格。

vue-grid-layout 动态添加删除单元格

vue-grid-layout 动态添加删除单元格,因为vue最基本的功能就是双向绑定,所以只要对 vue-grid-layout 的数据源进行添加删除就可以实现单元格的新增和删除功能。

vue-grid-layout 防止碰撞

vue-grid-layout 设置 prevent-collision 可以防止单元格碰撞,就是A单元格移动到B单格时,不会改变B单元格的位置。

vue-grid-layout 响应式布局

vue-grid-layout 响应式布局,设置responsive和breakpoints可以根据屏幕大小调整布局以达到设配各种屏幕的效果。

vue-grid-layout 镜像反转

vue-grid-layout 镜像反转,就是从左向右还是从右到左对齐。

vue-grid-layout 只允许某个元素允许拖动

vue-grid-layout 可以设置单元格中只允许某个元素允许拖动。

vue-grid-layout 多个容器

vue-grid-layout 在一个网页中多个多个容器

vue-grid-layout 单元格调整大小

在vue-grid-layout中我们可以通过is-resizable属性设置为true允许用户缩放单元格的大小,并通过resize和resized事件来获取单元格缩放进行了缩放。

vue-grid-layout 单元格移动事件

vue-grid-layout 的单元格有move移动中和moved移动完成事件,通过移动事件我们可以获取最新的vue-grid-layou布局并保存起来。

vue-grid-layout 事件列表

vue-grid-layout grid-layout和grid-item完整的事件列表

vue-grid-layout 属性列表

vue-grid-layout grid-layout和grid-item完整的属性列表

2023年新年快乐,The world is always beautiful

2023年新年快乐,The world is always beautiful

gridster.js 方法列表

gridster.js 有100多个函数方法,我们将列举add_widget resize_widget remove_widget remove_all_widgets serialize serialize_changed enable disable enable_resize disable_resize这几个常用的函数,其余函数请查看文章结尾的连接。

gridster.js 属性列表

本文将列举 gridster.js 的属性列表及其使用方法。

gridster.js 交换模式

gridster.js 设置shift_larger_widgets_down 为 false 时可以开启交换模式,所谓的交换模式,当往下拖动1个单元格时,遇到比它大的单元格不会把这个大的单元格挤到更下面去。

gridster.js 响应式布局网格

gridster.js 支持响应式布局网格模式,利用min_cols max_cols widget_base_dimensions 三个属性可以实现gridster.js网格响应屏幕的宽度。

gridster.js 缩放相关的回调函数

gridster.js 缩放相关的回调函数,开始缩放 start、缩放中 resize、停止缩放 stop。

gridster.js 拖动相关的回调函数

gridster.js 拖动相关的回调函数,本文将演示 start drag stop 三个回调函数,分别表示开始拖动、拖动中、结束拖动。

gridster.js 限制单元格大小

我们可以通过 gridster.js data-max-sizex, data-max-sizey, data-min-sizex and data-min-sizey 属性限制单元格大小,比如放大缩小时最多只能跨3行3列。