jquery win10拖拽布局插件jquery.gridster.js-爱编程

jquery win10拖拽布局插件jquery.gridster.js

来源：jq22 阅读：10 时间：2018-02-04 01:33

jquery win10拖拽布局插件jquery.gridster.js

插件描述：jquery可自由拖拽div布局类似win10系统的无规则拖拽布局

Html

<section class="demo">
<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>
    <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="2" data-sizex="2" data-sizey="1"></li>
    <li data-row="1" data-col="2" data-sizex="2" data-sizey="2"></li>
    <li class="try" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
    <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
    <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
    <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
    <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
    <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
  </ul>
</div>

引用jquery类库以后，再引用插件js文件，然后用几句jquery代码就可以调用

<script src="js/jquery.gridster.js" type="text/javascript">
</script>
<script type="text/javascript">
	var gridster;
	$(function() {
		gridster = $(".gridster > ul").gridster({
			widget_margins: [10, 10],
			widget_base_dimensions: [140, 140],
			min_cols: 6
		}).data('gridster');
	});
</script>

在线预览源码下载