属性
类型
LayoutItemRequired
interface LayoutItemRequired {
w: number,
h: number,
x: number,
y: number,
i: number | string
}LayoutItem
interface LayoutItem extends LayoutItemRequired {
minW?: number,
minH?: number,
maxW?: number,
maxH?: number,
moved?: boolean,
static?: boolean,
isDraggable?: boolean,
isResizable?: boolean
}Layout
type Layout = Array<LayoutItem>Breakpoint
type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'Breakpoints
type Breakpoints = Record<Breakpoint, number>ResponsiveLayout
type ResponsiveLayout = Record<Breakpoint, Layout>Compactor
可插拔的布局压缩算法接口。压缩器接收布局和列数，返回压缩后的新布局。
interface Compactor {
compact(layout: Layout, cols: number): Layout
allowOverlap?: boolean
}内置压缩器：
| 压缩器 | 说明 |
|---|---|
verticalCompactor | 向上压缩元素（默认，等价于 v1 的 verticalCompact: true） |
horizontalCompactor | 向左压缩元素 |
noCompactor | 无压缩，自由定位 |
fastVerticalCompactor | 区间树加速的垂直压缩，O(n log n) |
fastHorizontalCompactor | 区间树加速的水平压缩，O(n log n) |
withOverlap(compactor) | 包装任意压缩器以允许元素重叠 |
PositionStrategy
可插拔的定位策略接口。控制栅格元素在 DOM 中的定位方式。
interface PositionStrategy {
getStyle(top: number, left: number, width: number, height: number): Record<string, string>
getRtlStyle(top: number, right: number, width: number, height: number): Record<string, string>
}内置策略：
| 策略 | 说明 |
|---|---|
transformStrategy | 使用 CSS translate3d 定位（默认） |
absoluteStrategy | 使用 CSS top/left 定位 |
scaledStrategy(scale) | 对位置和尺寸应用缩放因子 |
GridConfig
interface GridConfig {
colNum?: number
rowHeight?: number
maxRows?: number
margin?: number[]
autoSize?: boolean
}DragConfig
interface DragConfig {
isDraggable?: boolean
dragThreshold?: number
restoreOnDrag?: boolean
}ResizeConfig
interface ResizeConfig {
isResizable?: boolean
}DropConfig
interface DropConfig {
isDroppable?: boolean
dropItem?: { w: number; h: number }
}GridLayout
layout
- 类型：
Layout - 必须的
这是栅格的初始布局。
值必须是一个数组。每个元素都须包含 i、x、y、w 和 h 属性。更多信息请参考下面的 GridItem 文档。
responsive-layouts
- 类型：
Partial<ResponsiveLayout> - 默认值：
{}
如果 responsive 设置为 true，该配置将作为栅格中每个断点的初始布局。
对象的键值是断点的名称，每个值则对应 layout 属性所定义的数组，例如：{ lg: [layout items], md: [layout items] }。
注意，在创建栅格布局后再设置该属性是无效的。
见 responsive、breakpoints 和 cols。
col-num
- 类型：
number - 默认值：
12
定义栅格系统的列数，其值须为自然数。
row-height
- 类型：
number - 默认值：
150
每行的高度的像素值。
max-rows
- 类型：
number - 默认值：
Infinity
定义栅格的最大行数。
margin
- 类型：
number[] - 默认值：
[10, 10]
定义栅格中的元素外边距。
其值须为包含两个像素的数组。第一个值代表横向外边距，第二个值代表纵向外边距。
is-draggable
- 类型：
boolean - 默认值：
true
表示栅格中的元素是否可拖拽。
is-resizable
- 类型：
boolean - 默认值：
true
表示栅格中的元素是否可缩放。
is-mirrored
- 类型：
boolean - 默认值：
false
表示栅格中的元素是否可镜像反转。
is-bounded
- 类型：
boolean - 默认值：
false
表示栅格中的元素在拖拽时是否绑定在容器中。
auto-size
- 类型：
boolean - 默认值：
true
表示容器的高度是否自适应。
vertical-compact
⚠️ 已废弃 — 请使用
compactor代替。传入verticalCompactor（默认）或noCompactor来控制压缩行为。
- 类型：
boolean - 默认值：
true
表示布局是否应该纵向压缩。
restore-on-drag
- 类型：
boolean - 默认值：
false
表示在某个元素被拖动后，是否应恢复被移动过的其他元素。
prevent-collision
- 类型：
boolean - 默认值：
false
表示是否防止元素碰撞，值为 true 时，元素只能拖放至空白处。
use-css-transforms
⚠️ 已废弃 — 请使用
positionStrategy代替。传入transformStrategy（默认）或absoluteStrategy。
- 类型：
boolean - 默认值：
true
表示是否使用 transition-property: transform; 的 CSS 属性。
responsive
- 类型：
boolean - 默认值：
false
表示布局是否根据窗口宽度进行响应式变化。
见 responsiveLayouts、breakpoints 和 cols。
breakpoints
- 类型：
Breakpoints - 默认值：
{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
为响应式布局设置断点。
见 responsiveLayouts 和 cols。
cols
- 类型：
Breakpoints - 默认值：
{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }
设置每个断点对应的列数。
use-style-cursor
- 类型：
boolean - 默认值：
true
表示是否动态设置指针样式。当拖动出现卡顿时，将此值设为 false 也许可以缓解布局问题。
该属性不是响应式的。
transform-scale
⚠️ 已废弃 — 请使用
positionStrategy配合scaledStrategy(scale)代替。
- 类型：
number - 默认值：
1
为栅格元素的大小设置缩放比例，1 表示 100%。
compactor
- 类型：
Compactor - 默认值：
verticalCompactor
设置布局的压缩算法。从 grid-layout-plus 导入内置压缩器：
import { horizontalCompactor, noCompactor, verticalCompactor, withOverlap } from 'grid-layout-plus'使用 withOverlap(compactor) 可以在应用压缩的同时允许元素重叠。
position-strategy
- 类型：
PositionStrategy - 默认值：
transformStrategy
设置栅格元素的定位策略。从 grid-layout-plus 导入内置策略：
import { absoluteStrategy, scaledStrategy, transformStrategy } from 'grid-layout-plus'当栅格在缩放容器中渲染时，使用 scaledStrategy(scale)。
is-droppable
- 类型：
boolean - 默认值：
false
启用从外部元素通过原生 HTML5 拖放到栅格中。需配合 drop-item 和 拖放事件 使用。
drop-item
- 类型：
{ w: number, h: number } - 默认值：
{ w: 1, h: 1 }
设置从外部拖入栅格的元素的默认大小（栅格单位）。仅在 is-droppable 为 true 时生效。
drag-threshold
- 类型：
number - 默认值：
0
设置指针在拖拽操作开始前必须移动的最小像素距离。用于防止意外拖拽。每个元素可以通过自身的 drag-threshold 属性覆盖此设置。
grid-config
- 类型：
GridConfig - 默认值：
undefined
栅格相关属性的分组配置对象。提供时，其值会覆盖对应的独立属性（col-num、row-height、max-rows、margin、auto-size）。
interface GridConfig {
colNum?: number
rowHeight?: number
maxRows?: number
margin?: number[]
autoSize?: boolean
}drag-config
- 类型：
DragConfig - 默认值：
undefined
拖拽相关属性的分组配置对象。提供时，其值会覆盖对应的独立属性（is-draggable、drag-threshold、restore-on-drag）。
interface DragConfig {
isDraggable?: boolean
dragThreshold?: number
restoreOnDrag?: boolean
}resize-config
- 类型：
ResizeConfig - 默认值：
undefined
缩放相关属性的分组配置对象。提供时，其值会覆盖对应的独立属性（is-resizable、resize-handles）。
interface ResizeConfig {
isResizable?: boolean
resizeHandles?: ResizeHandle[]
}drop-config
- 类型：
DropConfig - 默认值：
undefined
拖放相关属性的分组配置对象。提供时，其值会覆盖对应的独立属性（is-droppable、drop-item）。
interface DropConfig {
isDroppable?: boolean
dropItem?: { w: number; h: number }
}GridItem
i
- 类型：
number | string - 必须的
栅格元素的唯一标识。
x
- 类型：
number - 必须的
表示栅格元素的初始横向位置（应位于哪一列），其值须为自然数。
y
- 类型：
number - 必须的
表示栅格元素的初始纵向位置（应位于哪一行），其值须为自然数。
w
- 类型：
number - 必须的
表示栅格元素的初始宽度（应占多少列），其值须为自然数。
h
- 类型：
number - 必须的
表示栅格元素的初始高度（应占多少行），其值须为自然数。
min-w
- 类型：
number - 默认值：
1
表示栅格元素的最小宽度。如果 w 小于 min-w，那 w 会被设置成 min-w。
min-h
- 类型：
number - 默认值：
1
表示栅格元素的最小高度。如果 h 小于 min-h，那 h 会被设置成 min-h。
max-w
- 类型：
number - 默认值：
Infinity
表示栅格元素的最大宽度。如果 w 大于 max-w，那 w 会被设置成 max-w。
max-h
- 类型：
number - 默认值：
Infinity
表示栅格元素的最大高度。如果 h 大于 max-h，那 h 会被设置成 max-h。
is-draggable
- 类型：
boolean - 默认值：
null
表示栅格元素是否可拖拽。如果为 null 则取决于父容器。
is-resizable
- 类型：
boolean - 默认值：
null
表示栅格元素是否可缩放。如果为 null 则取决于父容器。
is-bounded
- 类型：
boolean - 默认值：
null
表示栅格元素是否在拖拽时绑定容器。如果为 null 则取决于父容器。
static
- 类型：
boolean - 默认值：
false
表示栅格元素是否为静态的（无法拖拽、调整大小或被其他元素移动）。
drag-ignore-from
- 类型：
string - 默认值：
'a, button'
表示栅格元素中哪些子元素无法触发拖拽事件，值为 css-like 选择器。
更多信息请参考 interact.js 文档 的 ignoreFrom。
drag-allow-from
- 类型：
string - 默认值：
null
表示栅格元素中哪些子元素可以触发拖拽事件，值为 css-like 选择器。
如果为 null，则可以通过任意元素触发拖拽（除了 drag-ignore-from）。
更多信息请参考 interact.js 文档 的 allowFrom。
resize-ignore-from
- 类型：
string - 默认值：
'a, button'
表示栅格元素中哪些子元素无法触发缩放事件，值为 css-like 选择器。
更多信息请参考 interact.js 文档 的 ignoreFrom。
preserve-aspect-ratio
- 类型：
boolean - 默认值：
false
如果为 true，则强制栅格元素在缩放时保持其纵横比。
drag-option
- 类型：
Record<string, any> - 默认值：
{}
传递给 interact.js 拖拽配置 的对象。
resize-option
- 类型：
Record<string, any> - 默认值：
{}
传递给 interact.js 缩放配置 的对象。
drag-threshold
- 类型：
number - 默认值：
null
设置该元素的最小拖拽像素距离。如果为 null，则继承父容器 GridLayout 的 drag-threshold 属性。