https://github.com/ksylvest/jquery-gridly

Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grid.
https://github.com/ksylvest/jquery-gridly

jquery

Last synced: 5 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/ksylvest/jquery-gridly
• Owner: ksylvest
• License: mit
• Created: 2013-06-15T00:07:50.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2023-03-16T05:40:13.000Z (almost 2 years ago)
• Last Synced: 2025-01-25T15:05:28.794Z (12 days ago)
• Topics: jquery
• Language: CoffeeScript
• Homepage: http://ksylvest.github.io/jquery-gridly/
• Size: 454 KB
• Stars: 855
• Watchers: 55
• Forks: 260
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

    

    

    

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:

    

      .brick.small {

        width: 140px;

        height: 140px;

      }

      .brick.large {

        width: 300px;

        height: 300px;

      }

    

    


      


      


      


      


      


      


    


    

      $('.gridly').gridly();

    

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

 - http://coffeescript.org/

 - http://arcturo.github.io/library/coffeescript/

## Status

[![Status](https://travis-ci.org/ksylvest/jquery-gridly.png)](https://travis-ci.org/ksylvest/jquery-gridly)

## Copyright

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