Skip to content
Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bourbon updating bourbon and neat Jan 23, 2015
images added fork Jul 3, 2013
javascripts
neat
packages
spec/javascripts/support
stylesheets bumping version May 27, 2015
.gitignore importing Jun 12, 2013
.travis.yml
Cakefile fixing up packaging Jan 10, 2015
Gemfile
Gemfile.lock updating gems Jan 23, 2015
LICENSE importing Jun 12, 2013
README.md fix typo in readme header for script tag Apr 7, 2017
Rakefile
bower.json bumping version May 27, 2015
gridly.jquery.json bumping version May 27, 2015
index.haml some readme and copywrite improvements Aug 6, 2015
index.html some readme and copywrite improvements Aug 6, 2015
package.json

README.md

jQuery Gridly

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.

Installation

To install copy the javascripts and stylesheets directories into your project and add the following snippet to the header:

<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" />

This plugin is also registered under http://bower.io/ to simplify integration. Try:

npm install -g bower
bower install gridly

Lastly this plugin is registered as a https://rails-assets.org/ to simplify integration with Ruby on Rails applications:

Gemfile

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

application.css

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

application.js

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

Examples

Setting up a gridly is easy. The following snippet is a good start:

<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>

Configuration

Gridly uses a fairly standard pattern for handling grids and offers three configuration options for sizing: base, gutter and columns:

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

When using the drag and drop sorting callbacks can be passed in when initializing:

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

Contributing

Gridly is maintained in CoffeeScript. All contributions need to be submitted in CoffeeScript. The project includes a Cakefile that can be used to compile all assets (see: cake watch). For more information about CoffeeScript see:

Status

Status

Copyright

Copyright (c) 2013 - 2015 Kevin Sylvestre. See LICENSE for details.

You can’t perform that action at this time.