jQuery Gridly 一个jQuery插件，允许拖放，以及在grid上调整大小。

原文

引用

jQuery Gridly

Gridly是一个jQuery插件，允许拖放，以及在grid上调整大小。

安装

要安装将javascripts和stylesheets目录复制到项目中，并将以下代码段添加到标题中：

此插件也注册在http://bower.io/下，以简化集成。尝试：

npm install -g bower
bower install gridly

最后，此插件注册为https://rails-assets.org/以简化与Ruby on Rails应用程序的集成：

Gemfile

+ source 'https://rails-assets.org'
...
+ gem 'rails-assets-gridly'

application.css

/*
 ...
 *= require gridly
 ...
*/

application.js

//= require jquery
...
//= require gridly

例子

设置grid很容易。以下代码段是一个好的开始：

Configuration

Gridly使用一个相当标准的模式处理grid，并提供三种配置选项大小：基地，沟槽和列：

$('.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

贡献

Gridly维护在CoffeeScript。所有捐款需要提交CoffeeScript。该项目包括一个Cakefile可以用来编译所有资产（见：）cake watch。有关详细信息，CoffeeScript请参阅：

• http://coffeescript.org/
• http://arcturo.github.io/library/coffeescript/

状态

版权

版权所有（c）2013 - 2015 Kevin Sylvestre。有关详细信息，请参阅LICENSE。