Coding
posted by Maan

Gridster.js: A jQuery Plugin for Building Intuitive Draggable Layouts

Gridster.js: A jQuery Plugin for Building Intuitive Draggable Layouts

This is it, the mythical drag-and-drop multi-column grid has arrived. Gridster is a jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed. Suitable for children of all ages.

Setup

Include dependencies

Gridster is currently written as a jQuery plugin, so you need to include it in the head of the document. Download the latest release at jQuery.

[zilla_toggle title=”jQuery Setup” state=”closed”]

<script type="text/javascript" src="libs/jquery.js"></script>
<script type="text/javascript" src="jquery.gridster.js"></script>

[/zilla_toggle]

HTML Structure

Class names and tags are customizable, gridster only cares about data attributes. Use a structure like this:

[zilla_toggle title=”HTML Structure” state=”closed”]

<div class="gridster">
  <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
        <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
        <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
        <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
       <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
       <li data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
   </ul>
</div>

[/zilla_toggle]

Grid it up!

Gridster accepts one argument, a hash of with configuration options. See the documentation for details.

[zilla_toggle title=”configuration options” state=”closed”]

$(<strong>function</strong>(){ <em>//DOM Ready</em>
    $(".gridster ul").gridster({
        widget_margins<strong>:</strong> [10, 10],
        widget_base_dimensions<strong>:</strong> [140, 140]
    });
});

[/zilla_toggle]

[zilla_alert style=”yellow”] Gridster supports:  Internet Explorer 9+, Firefox, Chrome, Safari and Opera.  [/zilla_alert]

[zilla_button url=”http://gridster.net/#documentation” style=”grey” size=”small” type=”round” target=”_blank”] Documentation [/zilla_button]      [zilla_button url=”http://gridster.net/#download” style=”green” size=”small” type=”round” target=”_blank”] Download Now [/zilla_button]

Maan

21 year old designer, blogger and front-end developer. love to share creative design and inspiration.

  • Lior

    VERY COOL!!!

  • lou

    Is it possible to set a fixed height to the grid ???? I need do fix it !!

comments powered by Disqus