# 属性
# GridLayout
# layout
- type:
Array - required:
true
这是栅格的初始布局。
数据源。值必须为 Array，其数据项为 Object。 每条数据项必须有 i, x, y, w 和 h 属性。 请参考下面的 GridItem。
# responsiveLayouts
- type:
Object - required:
false - default :
{}
如果 responsive 设置为 true，该配置将作为栅格中每个断点的初始布局。键值是断点名称，每项的值都是类似 layout 属性定义的数据结构，值必须为 Array，其数据项为 Object。例如： {lg: [layout items], md: [layout items]}。需要注意的是，在创建栅格布局后设置该属性无效。
在创建GridLayout之后设置prop无效。
可以查看 responsive, breakpoints 和 cols
# colNum
- type:
Number - required:
false - default:
12
定义栅格系统的列数，其值需为自然数。
# rowHeight
- type:
Number - required:
false - default:
150
每行的高度，单位像素。
# maxRows
- type:
Number - required:
false - default:
Infinity
定义最大行数。
# margin
- type:
Array - required:
false - default:
[10, 10]
定义栅格中的元素边距。
值必须是包含两个 Number的数组，数组中第一个元素表示水平边距，第二个表示垂直边距，单位为像素。
# isDraggable
- type:
Boolean - required:
false - default:
true
标识栅格中的元素是否可拖拽。
# isResizable
- type:
Boolean - required:
false - default:
true
标识栅格中的元素是否可调整大小。
# isMirrored
- type:
Boolean - required:
false - default:
false
标识栅格中的元素是否可镜像反转。
# autoSize
- type:
Boolean - required:
false - default:
true
标识容器是否自动调整大小。
# verticalCompact
- type:
Boolean - required:
false - default:
true
标识布局是否垂直压缩。
# preventCollision
- type:
Boolean - required:
false - default:
false
防止碰撞属性，值设置为ture时，栅格只能拖动至空白处。
# useCssTransforms
- type:
Boolean - required:
false - default:
true
标识是否使用CSS属性 transition-property: transform;。
# responsive
- type:
Boolean - required:
false - default:
false
标识布局是否为响应式。
可以查看 responsiveLayouts、breakpoints和 cols
# breakpoints
- type:
Object - required:
false - default: { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
为响应式布局设置断点。
可以查看 responsiveLayouts 和 cols
# cols
- type:
Object - required:
false - default: { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
设置每个断点对应的列数。
# useStyleCursor
- type:
Boolean - required:
false - default:
true
标识是否使用动态鼠标指针样式。当拖动出现卡顿时，将此值设为 false也许可以缓解布局问题。
此属性无效
# GridItem
# i
- type:
String - required:
true
栅格中元素的ID。
# x
- type:
Number - required:
true
标识栅格元素位于第几列，需为自然数。
# y
- type:
Number - required:
true
标识栅格元素位于第几行，需为自然数。
# w
- type:
Number - required:
true
标识栅格元素的初始宽度，值为colWidth的倍数。
# h
- type:
Number - required:
true
标识栅格元素的初始高度，值为rowHeight的倍数。
# minW
- type:
Number - required:
false - default:
1
栅格元素的最小宽度，值为colWidth的倍数。
如果w小于minW，则minW的值会被w覆盖。
# minH
- type:
Number - required:
false - default:
1
栅格元素的最小高度，值为rowHeight的倍数。
如果h小于minH，则minH的值会被h覆盖。
# maxW
- type:
Number - required:
false - default:
Infinity
栅格元素的最大宽度，值为colWidth的倍数。
如果w大于maxW，则maxW的值会被w覆盖。
# maxH
- type:
Number - required:
false - default:
Infinity
栅格元素的最大高度，值为rowHeight的倍数。
如果h大于maxH，则maxH的值会被h覆盖。
# isDraggable
- type:
Boolean - required:
false - default:
null
标识栅格元素是否可拖拽。如果值为null则取决于父容器。
# isResizable
- type:
Boolean - required:
false - default:
null
标识栅格元素是否可调整大小。如果值为null则取决于父容器。
# static
- type:
Boolean - required:
false - default:
false
标识栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。
# dragIgnoreFrom
- type:
String - required:
false - default:
'a, button'
标识栅格元素中哪些子元素无法触发拖拽事件，值为css-like选择器。
请参考interact.js docs (opens new window)中的ignoreFrom。
# dragAllowFrom
- type:
String - required:
false - default:
null
标识栅格元素中哪些子元素可以触发拖拽事件，值为css-like选择器。
如果值为null则表示所有子元素（dragIgnoreFrom的除外）。
请参考interact.js docs (opens new window)中的allowFrom。
# resizeIgnoreFrom
- type:
String - required:
false - default:
'a, button'
标识栅格元素中哪些子元素无法触发调整大小的事件，值为css-like选择器。
请参考interact.js docs (opens new window)中的ignoreFrom。