Gridly 基于 jQuery 的容器拖放布局插件

Question

Gridly 是一个基于 jQuery 的容器拖放布局插件，能够动态创建元素和删除元素，流畅的拖拽缩放动画效果，动态的调整网格的大小，能够兼容目前的大多数主流浏览器。

安装插件

1、你可以通过软件包管理器安装，只需要运行下面的代码

npm install -g bower
bower install gridly

2、或者你可以访问插件的 Github 地址，然后下载 Gridly 的压缩包得到源文件，然后将他们引入到你的网页中，下面是一个引入的示例：

<script src="https://libs.wenjiangs.com/jquery/2.1.3/jquery.min.js"></script>
<script src="javascript/jquery.gridly.js"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />

使用实例

使用 Gridly 并不难，下面是参考代码 。 参考使用就能够简单是展示出它的效果。

<style type="text/css">
  .gridly {
    position: relative;
    width: 960px;
  }
  .brick.small {
    width: 140px;
    height: 140px;
  }
  .brick.large {
    width: 300px;
    height: 300px;
  }
</style>
<div class="gridly">
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
  <div class="brick small"></div>
  <div class="brick small"></div>
  <div class="brick large"></div>
</div>
<script>
  $('.gridly').gridly();
</script>

可选配置参数

Gridly 使用一个相当标准的模式处理网格和提供三个配置选项的大小：base, gutter 和 columns：

$('.gridly').gridly({
  base: 60, // px 
  gutter: 20, // px
  columns: 12
});

自定义回调函数

当使用拖放排序回调可以通过在初始化时使用下面的方法：

var reordering = function($elements) {
  // Called before the drag and drop starts with the elements in their starting position.
};
var reordered = function($elements) {
  // Called after the drag and drop ends with the elements in their ending position.
};
$('.gridly').gridly({
  callbacks: { reordering: reordering , reordered: reordered }
});
$('.gridly').gridly('draggable', 'off'); // disables dragging
$('.gridly').gridly('draggable', 'on);  // enables dragging

相关链接

• 在线示例：http://ksylvest.github.io/jquery-gridly/
• Github地址：https://github.com/ksylvest/jquery-gridly