Gridster

by sloga

HTML

<link rel="stylesheet" href="http://http://gridster.net/dist/jquery.gridster.min.css">
<link rel="stylesheet" href="http://http://gridster.net/assets/css/style.css">
<script src="http://gridster/dist/jquery.gridster.js"></script>
<script src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
<section class="demo">
    <div id="main" class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="2" data-sizey="1"></li>
            <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
            <li data-row="3" data-col="2" data-sizex="2" data-sizey="1"></li>
            <li data-row="1" 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>
</section>

CSS

.gridster {
    width: 940px;
    margin: 0 auto;

    opacity: .8;

    -webkit-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -o-transition: opacity .6s;
    -ms-transition: opacity .6s;
    transition: opacity .6s;
}

.gridster .gs_w {
    background: #FFF;
    cursor: pointer;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.gridster .player {
    -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
    box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}


.gridster .gs_w.try {
    background-image: url(../img/sprite.png);
    background-repeat: no-repeat;
    background-position: 37px -169px;

}

.gridster .preview-holder {
    border: none!important;
    border-radius: 0!important;
    background: rgba(255,255,255,.2)!important;
}

JavaScript

var gridster;
$(function () {
    $('<div id="main" class="gridster"></div>').appendTo('section');

    if ($.cookie("grid-data") == null) {
        var json = [{
            "id": "foo",
                "col": 1,
                "row": 1,
                "size_y": 2,
                "size_x": 3
        }, {
            "id": "bar",
                "col": 4,
                "row": 1,
                "size_y": 2,
                "size_x": 2
        },

        {
            "id": "tar",
                "col": 6,
                "row": 1,
                "size_y": 2,
                "size_x": 2
        },


        {
            "id": "boo",
                "col": 1,
                "row": 3,
                "size_y": 2,
                "size_x": 3
        }, {
            "id": "aar",
                "col": 4,
                "row": 3,
                "size_y": 2,
                "size_x": 2
        },

        {
            "id": "dar",
                "col": 6,
                "row": 3,
                "size_y": 2,
                "size_x": 2
        }

        ];
    } else {
        var json = JSON.parse($.cookie("grid-data"));
    }

    var grid = $("#main").gridster({
        draggable: {
            stop: function (event, ui) {
                $.cookie("grid-data", JSON.stringify(grid.serialize()));
            }
        },
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140],
        max_size_y: 3,
        serialize_params: function ($w, wgd) {
            return {
                id: wgd.el[0].id,
                col: wgd.col,
                row: wgd.row,
                size_y: wgd.size_y,
                size_x: wgd.size_x
            }
        }
    }).data('gridster');

    for (i = 0; i < json.length; i++) {
        grid.add_widget(
            '<div id="' + json[i]['id'] + '"></div>',
        json[i]['size_x'],
        json[i]['size_y'],
        json[i]['col'],
        json[i]['row']);
    }
});