article:
JS Plugin: vanity jquery toolset
article:
Other: Sketch Sheets

JS Plugin: gridster

Advertisement

This is a drag-and-drop multi-column jQuery grid plugin.

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.

Plugin: gridster



Usage

plugin

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

html structure

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


Work

$(function(){ //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });

});



Using the API

To get hold of the API object, use the jQuery data method like so:

$(function(){ //DOM Ready

   var gridster = $(".gridster ul").gridster().data('gridster');

});


Add a new widget to the grid

gridster.add_widget('<li class="new">The HTML of the widget...<li>', 2, 1);


Remove a widget from the grid

gridster.remove_widget( $('.gridster li').eq(3) );


Get a serialized array with the elements positions
Creates a JavaScript array of objects with positions of all widgets, ready to be encoded as a JSON string.

gridster.serialize();





source
usage
documentation
github
download

Advertisement
Tags: grid, css, html, plugin, jquery, layout, develop, web, internet, responsive, ux, ui

Leave a Comment

No Comment

© Creative3x Ltd.