jQuery可自由拖拽Div布局类似win10系统的无规则拖拽布局4509
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>

技术讨论区(1 个讨论)

  1. 就爱睡觉 1

    就爱睡觉

    因为要将移动后的布局保存,该怎么手动触发拖拽完毕后的事件

    2018-6-8 11:48:18 | 回复

  2. 请先登录

      发 布