gridstack.js是一款响应式可拖拽的元素组件网格布局jQuery插件。该jQuery插件允许你创建给予Bootstarp v3的响应式可拖拽的网格布局界面，可以用于制作可拖拽的多列网格布局。并且它还可以支持触摸屏设备。

外部依赖

gridstack.js依赖下面的js库文件：

• lodash.js（>= 3.5.0）
• jQuery（>= 1.11.0）
• jQuery UI。组件的最小需求：Core, Widget, Mouse, Draggable, Resizable
• （可选项）knockout.js（>= 3.2.0）
• （可选项）jquery-ui-touch-punch：支持移动触摸设备

你也可以使用underscore.js来取代lodash.js。

HTML结构

<div class="grid-stack">
    <div class="grid-stack-item" 
        data-gs-x="0" data-gs-y="0" 
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item" 
        data-gs-x="4" data-gs-y="0" 
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content"></div>
    </div>
</div>                
              

初始化插件

<script type="text/javascript">
$(function () {
    var options = {
        cell_height: 80,
        vertical_margin: 10
    };
    $('.grid-stack').gridstack(options);
});
</script>                
              

配置参数

• always_show_resize_handle：如果设置为true，缩放手柄将会一直显示。默认为false。
• animate：转换为动画。默认为false。
• auto：如果设置为false将不会初始化已经存在的项。默认为true。
• cell_height：单元格的高度。默认值为60。
• draggable：允许覆盖 jQuery UI draggable 选项。默认值：{handle: '.grid-stack-item-content', scroll: true, appendTo: 'body'}。
• handle：拖放手柄选择器。默认值为：'.grid-stack-item-content'。
• height：最大行数。默认为0，意思是没有最大行数。
• float：允许元素浮动。默认值：false。
• item_class：元素组件的class。默认值'grid-stack-item'。
• min_width：最小宽度。如果窗口的宽度小于网格的宽度，将会以单列显示。默认值为768。
• placeholder_class：placeholder的class。默认值为'grid-stack-placeholder'。
• resizable：允许覆盖jQuery UI resizable选项。默认值为：{autoHide: true, handles: 'se'}。
• vertical_margin：垂直间隙的尺寸。默认值为20。
• width：网格的列数。默认值为12。

网格属性

• data-gs-animate：转换为动画。
• data-gs-width：列数。
• data-gs-height：最大行数。默认为0，意思是没有最大行数。

Item属性

• ata-gs-x, data-gs-y：元素的位置。
• data-gs-width, data-gs-height：元素的尺寸。
• data-gs-max-width, data-gs-min-width, data-gs-max-height, data-gs-min-height：元素的约束。
• data-gs-no-resize：禁止元素缩放尺寸。
• data-gs-no-move：禁止元素移动。
• data-gs-auto-position：忽略data-gs-x和data-gs-y属性，并将元素放置在第一个可用的位置上。
• data-gs-locked：元素将被锁定。锁定后其它元素在缩放或移动时不能改变这个元素。但是该元素仍然可以被移动或缩放。如果不希望它移动或缩放，需要添加data-gs-no-move或data-gs-no-resize属性。

关于该元素组件布局jQuery插件的事件、API及其它资料，请参考：https://github.com/troolee/gridstack.js

在线预览    源码下载