rediscovering_gridster

by amindunited

HTML

<div class="add">ADD</div> 

<div class="gridster">
    <ul>
      <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
      <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
      <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
      <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
      <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
      <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
      <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
      <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
      <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
      <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
    </ul>
  </div>
<!-- 
JS LIBS
-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.7.0/ember.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.8/ember-data.min.js"></script>
<script src="https://rawgithub.com/eviltrout/ember-cloaking/master/ember-cloaking.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>

<script src="https://rawgithub.com/ducksboard/gridster.js/master/dist/jquery.gridster.with-extras.js"></script>

CSS

* {
    margin: 0px;
    padding: 0px;
    list-style:none;
}

.gridster ul li {
    background-color: rgba(0, 0, 0, .5);
}

/*! gridster.js - v0.5.6 - 2014-09-25
* http://gridster.net/
* Copyright (c) 2014 ducksboard; Licensed MIT */

.gridster {
    position:relative;
}

.gridster > * {
    margin: 0 auto;
    -webkit-transition: height .4s, width .4s;
    -moz-transition: height .4s, width .4s;
    -o-transition: height .4s, width .4s;
    -ms-transition: height .4s, width .4s;
    transition: height .4s, width .4s;
}

.gridster .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),
.ready .resize-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,
.gridster .resizing {
    z-index: 10!important;
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -o-transition: all 0s !important;
    transition: all 0s !important;
}


.gs-resize-handle {
    position: absolute;
    z-index: 1;
}

.gs-resize-handle-both {
    width: 20px;
    height: 20px;
    bottom: -8px;
    right: -8px;
   ...

JavaScript

$(function(){
    $('.add').on('click', function() {
        gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);
    });
});

var gridster;

$(function(){
    
    var log = document.getElementById('log');
    
    gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [100, 55],
        widget_margins: [5, 5],
        max_cols: 4,
        autogrow_cols: false,//true,
        resize: {
            enabled: true
        }
    }).data('gridster');
    
    
});