Awesome Open Source
Awesome Open Source

jQuery Gridly

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


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

<script src="" 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 to simplify integration. Try:

npm install -g bower
bower install gridly

Lastly this plugin is registered as a to simplify integration with Ruby on Rails applications:


+ source ''
+ gem 'rails-assets-gridly'


 *= require gridly


//= require jquery
//= require gridly


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

  .brick.small {
    width: 140px;
    height: 140px;

  .brick.large {
    width: 300px;
    height: 300px;

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



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

  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.

  callbacks: { reordering: reordering , reordered: reordered }

$('.gridly').gridly('draggable', 'off'); // disables dragging
$('.gridly').gridly('draggable', 'on);  // enables dragging


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:




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

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Plugin (113,600
Jquery (26,493
Coffeescript (17,224
Grid (12,472