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 gridster="gridsterOpts" class="grid">
        <ul>
            <li gridster-item="item" ng-repeat="item in standardItems" class="panel panel-default" ng-click="testMe($index, $event)">
                <div class="panel-body">{{ item.name }}</div>
            </li>
        </ul>
    </div>
</div>

CSS

.grid {
    border: 1px dashed;
}
.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 .gridster-item-drag {
    color: black;
}
ul {
    list-style: none;
}

.selected{
  background: gray;
}

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

        margins: [10, 10],
        pushing: false,
        floating: false,
        draggable: {
            enabled: true,
            handle: '.gridster-item-drag'
        },
        resizable: {
            enabled: true,
            handles: ['se'],
            resize: Resize
            //stop: Resize
        },
        minSizeX: 1,
        minSizeY: 1,
        defaultSizeX: 0, // default width of an item in columns
        defaultSizeY: 1 // default height of an item in rows
    };

    $scope.standardItems = buttons;
    $scope.selectedItems = [];
    $scope.testMe = function(index, e){        
    var gridster = e.currentTarget;
    var button = buttons[index];
    
    if(e.shiftKey && !gridster.classList.contains('selected')){
    
        gridster.classList.add('selected');
        $scope.selectedItems.push(index);
    }   
    
     else if (gridster.classList.contains('selected')){
      	gridster.classList.remove('selected');
        
        if ($scope.selectedItems.indexOf(index) !== -1){
        	$scope.selectedItems.splice($scope.selectedItems.indexOf(index), 1);
   ...