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