Gridly是一个jQuery插件，可以在网格上进行拖放和调整大小。
Posted
tags:
中文标题：Gridly是一个jQuery插件，可以在网格上进行拖放和调整大小。 原文标题：Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid. 项目评级：Star:858 Fork:275 下载地址：https://github.com/ksylvest/jquery-gridly 详情介绍jQuery网格化
Gridly是一个jQuery插件，可以在网格上进行拖放和调整大小。
安装
要安装，请将javascripts和样式表目录复制到您的项目中，并将以下代码段添加到标题中：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.gridly.js" type="text/javascript"></script>
<link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />
此插件也在下注册http://bower.io/以简化集成。尝试：
npm install -g bower
bower install gridly
最后，这个插件被注册为https://rails-assets.org/为了简化与RubyonRails应用程序的集成：
Gemfile公司
+ source 'https://rails-assets.org'
...
+ gem 'rails-assets-gridly'
应用程序.css
/*
...
*= require gridly
...
*/
应用程序.js
//= require jquery
...
//= require gridly
示例
设置网格很容易。以下片段是一个良好的开端：
<style>
.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使用相当标准的模式来处理网格，并提供三种配置选项来调整大小：基本、沟槽和列：
$('.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
贡献
网格保持在CoffeeScript。所有贡献都需要在CoffeeScript中提交。该项目包括一个Cakefile，可用于汇编所有资产（见：cake watch）。有关CoffeeScript的更多信息，请参阅：
地位
版权
版权所有（c）2013-2015 Kevin Sylvestre。有关详细信息，请参阅许可证。
Struts2 jquery 插件网格：选择行时，调用动作并隐藏网格中的行