jquery gridly (拖拽插件)

Jquery Gridly 在项目中的使用

1.引入 js 和 css 两个文件，项目中位置如下

  /erptheme/jqueryGridly/jquery.gridly.js
  /erptheme/jqueryGridly/jquery.gridly.css

2.在页面引入

<style type="text/css">
  .gridly {
    position: relative;
  }
  
</style>
<div class="gridly">
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
  <div class="brick"></div>
</div>
<script>
  var reordered = function($elements){
     //当前拖拽对象
     var currentObj =this.reordered.arguments[1];
     if(typeof(currentObj)!= "undefined"){
        //拖拽后模块数组
        var arr = $elements;
     }
  }

  $('.gridly').gridly({
    base: 60, // px   基本值
    gutter: 20, // px  沟渠，指模块间的间隔
    columns: 12  //      列,并不是一行几个div块，而是基于需要预留出多少个base   
    callbacks:{reordered:reordered }  //拖拽后回调函数
  });

</script>

举例：一行有两个需要拖拽的块，一个宽30，一个宽60 ，那么 base:30 columns:3
如果给的 columns 越大，可以拖拽的范围就越大