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

外部依赖

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

你也可以使用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-xdata-gs-y属性,并将元素放置在第一个可用的位置上。
  • data-gs-locked:元素将被锁定。锁定后其它元素在缩放或移动时不能改变这个元素。但是该元素仍然可以被移动或缩放。如果不希望它移动或缩放,需要添加data-gs-no-movedata-gs-no-resize属性。

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