Angular Gridster

by dpnminh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<link rel="stylesheet" href="http://rawgit.com/ManifestWebDesign/angular-gridster/master/dist/angular-gridster.min.css">
<script src="http://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.css">
<div ng-controller="MyCtrl" class="container">
    <form class="form-horizontal">
        <div class="form-group">
            <div class="col-sm-12">
                <button class="btn btn-default" ng-click="add()">Add</button>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Cols</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" placeholder="cols" ng-model="gridsterOpts.columns" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Rows</label>
            <div class="col-sm-10">
                <input class="form-control" type="text" placeholder="rows" ng-model="gridsterOpts.maxRows" />
            </div>
        </div>
    </form>
    <div class="container">
    
    <div gridster="gridsterOpts" class="grid">
        <ul>
            <li gridster-item="item" ng-repeat="item in standardItems" class="panel panel-default">
              <div class="gridster-item-drag">
              
              </div>
                <div class="panel-body">{{ item.name }}</div>
            </li>
        </ul>
    </div>
    </div>
</div>

CSS

.grid {
}

.gridster{
  margin:10px;
}
.gridster .gridster-item {
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.gridster-item-drag {
    background: black;
    height: 5px;
    width:100%;
}
ul {
    list-style: none;
}

.container{
  padding: 10px;
  
    border: 1px dashed;
    overflow-y: scroll;
}

JavaScript

var buttons = [{
    sizeX: 2,
    sizeY: 1,
    row: 0,
    col: 0
}, {
    name: "Drag down to the 4th row",
    sizeX: 2,
    sizeY: 2,
    row: 0,
    col: 2
}, {
    sizeX: 2,
    sizeY: 1,
    row: 2,
    col: 1
}, {
    sizeX: 1,
    sizeY: 1,
    row: 2,
    col: 3
}, {
    sizeX: 1,
    sizeY: 1,
    row: 2,
    col: 4
}, {
    sizeX: 1,
    sizeY: 1,
    row: 0,
    col: 4
}, {
    sizeX: 1,
    sizeY: 1,
    row: 0,
    col: 5
}, {
    sizeX: 2,
    sizeY: 1,
    row: 1,
    col: 0
}, {
    sizeX: 1,
    sizeY: 1,
    row: 1,
    col: 4
}, {
    sizeX: 1,
    sizeY: 2,
    row: 1,
    col: 5
}, {
    sizeX: 1,
    sizeY: 1,
    row: 2,
    col: 0
}];

var gridsterModule = angular.module('myApp', ['gridster']);

gridsterModule.controller('MyCtrl', function ($scope) {
    $scope.gridsterOpts = {
        columns: 10,
        maxRows: 4, // maximum amount of rows in the grid

        colWidth: 'auto',		 // can be an integer or 'auto'.  'auto' uses the pixel width of the element divided by 'columns'
			rowHeight: 'match',		  // can be an integer or 'match'.  Match uses the colWidth, giving you square widgets.
			margins: [10, 10],		// the pixel distance between each widget
			sparse: true,
        pushing: false,
        floating: true,
        swapping: true,
        width: "auto",
        outerMargin:false,

        draggable: {
            enabled: true,
            handle: '.gridster-item-drag'
        },
        resizable: {
            enabled: true,
            handles: ['se']
        },
        defaultSizeX: 1, // default width of an item in columns
        defaultSizeY: 1, // default height of an item in rows,
        extraRows: 1			// Add more rows to the grid in addition to those that have been calculated

    };

    $scope.standardItems = buttons;

    $scope.add = function () {
        buttons.push({});
    };

    $scope.remove = function (index) {
        buttons.splice(index, 1);
    };
});