Report Manager 1

HTML

<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" href="http://gridster.net/demos/assets/demo.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<p><i class="fa fa-cog fa-lg"></i></p>

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

      <li data-row="3" data-col="1" data-sizex="10" data-sizey="2">
        <header>|||</header>
       Report Grid Area
      </li>
    </ul>
  </div>

CSS

.gridster li header {
        background: #999;
        display: block;
        font-size: 20px;
        line-height: normal;
        padding: 4px 0 6px ;
        margin-bottom: 20px;
        cursor: move;
}

.right {    
    float: right;
}

JavaScript

var gridster;

      $(function(){

        gridster = $(".gridster ul").gridster({
          widget_base_dimensions: [50, 60],
          widget_margins: [5, 5],
          draggable: {
            handle: 'header'
          }
        }).data('gridster');

      });

 $(".gridster ul").gridster({
      widget_margins: [10, 10],  
      widget_base_dimensions: [50, 80] // width, height
  });