gridster demo

prototype for Heavy Meta layout manager using gridster.js

HTML

<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<div id="dragFrom" class="draggable">Drag From Here</div>
<div class="gridster">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">Gridster 1</li>
    </ul>
</div>
<br/>
<hr>
<br/>
<div class="gridster2">
    <ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="1">Gridster 2</li>
    </ul>
</div>

CSS

input {
    width: 100px;
}
.gridster {
    position:relative;
    background-color: gray;
}
.gridster2 {
    position:relative;
    background-color: gray;
}
li {
    background-color: white;
    width: 150px;
    height: 150px;
    border: solid 2px black;
}
.gridster > * {
    margin: 0 auto;
    -webkit-transition: height .4s;
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
    transition: height .4s;
}
.gridster .gs_w {
    z-index: 2;
    position: absolute;
}
.gridster2 > * {
    margin: 0 auto;
    -webkit-transition: height .4s;
    -moz-transition: height .4s;
    -o-transition: height .4s;
    -ms-transition: height .4s;
    transition: height .4s;
}
.gridster2 .gs_w {
    z-index: 2;
    position: absolute;
}
.ready .gs_w:not(.preview-holder) {
    -webkit-transition: opacity .3s, left .3s, top .3s;
    -moz-transition: opacity .3s, left .3s, top .3s;
    -o-transition: opacity .3s, left .3s, top .3s;
    transition: opacity .3s, left .3s, top .3s;
}
.ready .gs_w:not(.preview-holder) {
    -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
    -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
    -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
    transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
}
.gridster .preview-holder {
    z-index: 1;
    position: absolute;
    background-color: #fff;
    border-color: #fff;
    opacity: 0.3;
}
.gridster .player-revert {
    z-index: 10!important;
    -webkit-transition: left .3s, top .3s!important;
    -moz-transition: left .3s, top .3s!important;
    -o-transition: left .3s, top .3s!important;
    transition: left .3s, top .3s!important;
}
.gridster .dragging {
    z-index: 10!important;
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -o-transition: all 0s !important;
    transition: all 0s !important;
}
.gridster2 .preview-holder {
   ...

JavaScript

$(function () { //DOM Ready

    $(".gridster ul").gridster({
        widget_margins: [5, 5],
        widget_base_dimensions: [100, 120]
    });

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

    $("#dragFrom").draggable();

    $(".gridster ").droppable({
        drop: function (event, ui) {

            $("#dragFrom").attr("style", 'position: relative;');
            var widget = gridster.add_widget('<li><h5>Ukulele Boat</h5><img height=100 width=100 src="http://i.imgur.com/XjNt15P.jpg" alt="Uke Boat" ></li>', 1, 1);
            widget.dblclick(function (widget) {
                widget = gridster.remove_widget(this);
                var gridster2 = $(".gridster2 ul").gridster().data('gridster');
                widget = gridster2.add_widget('<li id="draggable2"><h5>Ukulele Boat</h5><img height=100 width=100 src="http://i.imgur.com/XjNt15P.jpg" alt="Uke Boat" ></li>', 1, 1);
                widget.dblclick(function (widget) {
                    gridster2.remove_widget(this);
                });
            });
        }
    });

    $(".gridster2 ").droppable({
        drop: function (event, ui) {

            var widget = gridster2.add_widget('<li id="draggable2"><h5>Electric Goldfish</h5><img height=100 width=100 src=http://i.imgur.com/OYfuMLF.jpg" alt="Electric Goldfish"  ></li>', 1, 1);
            widget.dblclick(function (widget) {
                widget = gridster2.remove_widget(this);
                var gridster = $(".gridster ul").gridster().data('gridster');
                widget = gridster.add_widget('<li id="draggable2"><h5>Electric Goldfish</h5><img height=100 width=100 src=http://i.imgur.com/OYfuMLF.jpg" alt="Electric Goldfish" ></li>', 1, 1);
                widget.dblclick(function (widget) {
                    gridster.remove_widget(this);
                });
            });
            $("#dragFrom").attr("style", 'position: relative;');

        }
   ...