Gridstack.js – 响应式拖放网格布局
2026年7月28日3
请注意，当前版本的 Gridstack.js 无需依赖 jQuery，而旧版 jQuery 项目应使用旧版与 jQuery 兼容的构建版本。
1、 在页面中引入必要的 JavaScript 和 CSS 文件。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.min.css" /> <script src="https://cdn.jsdelivr.net/npm/gridstack@latest/dist/gridstack.all.js"></script>
2、将可选的网格项插入到 Grid Stack 容器中，并通过 data-option 属性传递选项，具体如下：
<div class="grid-stack">
<div class="grid-stack-item">
<div class="grid-stack-item-content">Item 1</div>
</div>
<div class="grid-stack-item" data-gs-width="2">
<div class="grid-stack-item-content">Item 2 wider</div>
</div>
</div>
3、 初始化插件，就完成了。
var grid = GridStack.init();
var grid = GridStack.init({
// 是否接受从其他网格或外部拖放过来的控件
// true（使用 '.grid-stack-item' 类过滤器）或 false
// 字符串，用于指定类名
// 函数 (i: number, element: Element): boolean
acceptWidgets: false,
// false：仅在鼠标悬停在小部件上时显示调整大小控点
// true：始终显示调整大小控点
// 'mobile'：若在移动设备上运行，则默认为 true，否则为 false
alwaysShowResizeHandle: 'mobile',
// 启用动画
animate: false,
// 列数和行数
column: 12,
// 列选项
// 详见下文
columnOpts: {
// 希望保持的宽度（±50%），用于动态确定列数
columnWidth?: number;
// 允许的最大列数（默认：12）。注意：请确保有正确的 CSS 来支持此功能。
columnMax?: number ;
// 更改列数时的全局重新布局模式
layout?: ColumnOptions ;
// 指定断点是针对窗口大小还是网格大小（默认：false = 网格）
breakpointForWindow?: boolean;
// 显式指定宽度：列数断点，而非自动生成的 'columnWidth'。
// 注意：请确保有正确的 CSS 代码来支持此功能。
breakpoints?: Breakpoint[];
},
row: 0,
// 行数上限/下限
maxRow: 0,
minRow: 0,
// 若使用基于非 ce 的 style，请在此处传入您的非 ce，GridStack 会将其添加到生成的<style>元素中
nonce: '',
// 网格在单列模式下显示所需的最小宽度（默认值：768）*/
oneColumnSize: 768,
// 若希望 oneColumnMode 在排序时遵循 DOM 顺序并忽略常规多列布局中的 x、y 坐标，请设置为 true。
// 这使您能够创建与其他布局不同的自定义单列布局。（默认值：false）
oneColumnModeDomSort: false,
// 组件类
itemClass: 'grid-stack-item',
// 占位符类
placeholderClass: 'grid-stack-placeholder',
// 占位符文本
placeholderText: '',
// 可拖动控件的选择器
handle: '.grid-stack-item-content',
// 控件的类名
handleClass: null,
// 允许选择旧版行为（将 STYLE 元素添加到 HEAD 元素中，而非 parentNode）
styleInHead: false,
// 整数（px）
// 字符串（例如：'100px'、'10em'、'10rem'）。注意：% 单位不适用——参见 CellHeight
// 0，此时库不会为行生成样式。所有样式都必须在您自己的 CSS 文件中定义。
// auto - 将为正方形单元格计算高度（宽度 / 列数），并在调整窗口大小时实时更新<a href="https://www.jqueryscript.net/time-clock/">date</a>d
// initial - 与 'auto' 类似（从正方形单元格开始），但在调整窗口大小时保持该尺寸。
cellHeight: 'auto',
// 当 cellHeight='auto' 时使用的节流延迟时间（单位：毫秒），用于在性能与易用性之间取得平衡
cellHeightThrottle: 100,
// 调用 load() 或 addGrid() 时要创建的子项列表
// 参见下方的项选项
children: [],
// 在 '.grid-stack' 类（CSS 所需）之上添加的额外类，用于区分此实例。
class: '',
// 可以是：
// 一个整数（px）
// 一个字符串（例如：'2em'、'20px'、'2rem'）
margin: 10,
// 或
marginTop: 10,
marginBottom: 10,
marginLeft: 10,
marginRight: 10
// 若为 false，则表示不初始化现有项目
auto: true,
// 启用浮动小部件
float: false,
// 使网格保持静态
staticGrid: false,
// false：仅在鼠标悬停在小部件上时显示调整大小控点
// true：始终显示调整大小控点
// 'mobile'：若在移动设备上运行，则设为 true（因为移动设备上严格来说不存在悬停操作），否则设为 false。此代码在浏览器用户代理检测中使用以下条件：alwaysShowResizeHandle: /<a href="https://www.jqueryscript.net/tags.php?/Android/">Android</a>|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent )
alwaysShowResizeHandle: 'mobile',
// 允许覆盖 <a href="https://www.jqueryscript.net/tags.php?/jQuery UI/">jQuery UI</a> 的可拖动选项
draggable: {
handle: '.grid-stack-item-content',
scroll: true,
appendTo: 'body'
},
// 允许用户将嵌套的网格项拖出父容器，或禁止此操作
dragOut: false,
// 使网格项根据其内容自动调整大小，每当网格或项被调整大小时，调用 resizeToContent(el)
sizeToContent: true,
// 允许覆盖 jQuery UI 的 resizable 选项
// 控制柄可以是 n、ne、e、se、s、sw、w、nw 的任意组合，或全部
resizable: {handles: 'se'},
// 禁止拖动控件
disableDrag: false
// 禁止调整控件大小
disableResize: false,
// 若为 `true`，将网格切换为从右到左（RTL）布局。
// 可能的取值为 `true`、`false`、`'auto'`
rtl: 'auto',
// 若为 `true`，则可通过将小部件拖拽至网格外将其移除
removable: false,
// 将小部件拖拽至网格外后，系统在移除该小部件前等待的时间（单位：毫秒）
removeTimeout: 2000,
});
初始发布：2026年7月28日
TAGS：#Javascript#展示
下个内容
Advanced Mark – 高性能文本高亮插件
7330056
还没有任何评论！