var app = angular.module('plunker', ['gridster']);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.gridsterOptions = {
columns: 4,
margins: [12, 15], // the pixel distance between each widget
floating: false,
defaultSizeX: 1, // the default width of a gridster item, if not specifed
defaultSizeY: 1, // the default height of a gridster item, if not specified
minSizeX: 1, // minimum column width of an item
maxSizeX: 1, // maximum column width of an item
minSizeY: 1, // minumum row height of an item
maxSizeY: null, // maximum row height of an item
colWidth: 150,
draggable: {
start: function(event, $element, widget) {
$scope.draggedStart = widget;
}, // optional callback fired when drag is started,
drag: function(event, $element, widget) {
$scope.draggedDrag = widget;
}, // optional callback fired when item is moved,
stop: function(event, $element, widget) {
$scope.draggedStop = widget;
}
}
};
$scope.items = [
{
boardId: 1,
col: 0,
row: 2,
sizeX: 1,
sizeY: 1,
content: "This is a new Item",
class: {
id: 1, color: 'red'
},
editMode: true
},
{
boardId: 1,
col: 1,
row: 0,
sizeX: 1,
sizeY: 1,
content: "Another Item of note",
class: {
id: 2, color: 'green'
},
editMode: true
},
{
boardId: 1,
col: 0,
row: 0,
sizeX: 1,
sizeY: 1,
content: "Awesome Item",
class: {
id: 3, color: 'yellow'
},
editMode: true
}
];
$scope.items2 = [
{
boardId: 1,
col: 0,
row: 2,
sizeX: 1,
sizeY: 1,
content: "This is a new Item",
class: {
id: 1, color: 'red'
},
editMode: true
},
{
boardId: 1,
col: 1,
row: 0,
sizeX: 1,
sizeY: 1,
content: "Another Item of note",
class: {
id: 2, color: 'green'
},
editMode: true
},
{
boardId: 1,
col: 0,
row: 0,
sizeX: 1,
sizeY: 1,
content: "Awesome Item",
class: {
id: 3, color: 'yellow'
},
editMode: true
}
];
$scope.statuses = [{
id: 1,
color: 'red'
}, {
id: 2,
color: 'green'
}, {
id: 3,
color: 'yellow'
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="angular-gridster.min.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.26/angular.js" data-semver="1.2.26"></script>
<script type="text/javascript" src="https://rawgit.com/ManifestWebDesign/angular-gridster/master/src/angular-gridster.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
Items: {{items}}
<hr />
<div>
Dragged Start: {{draggedStart}}
</div>
<div>
Dragged End: {{draggedStop}}
</div>
<div>
Dragged Drag: {{draggedDrag}}
</div>
<hr />
<div>
<ul gridster="gridsterOptions" class="section">
<div class="column first-column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<li class="myItem" gridster-item="item" ng-repeat="(index, item) in items" ng-class='item.class.color'>
<div ng-disabled="!item.editMode">
<div>
<input type="text" class="card-input" ng-model="item.content" ng-disabled="!item.editMode" />
</div>
<select ng-options='status as status.color for status in statuses track by status.id' ng-model='item.class' ng-disabled="!item.editMode">
</select>
</div>
<div class="bottom-check">
<input type="checkbox" ng-model="item.editMode" /> Edit Mode
</div>
</li>
</ul>
<ul gridster="gridsterOptions" class="section">
<div class="column first-column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<li class="myItem" gridster-item="item" ng-repeat="(index, item) in items2" ng-class='item.class.color'>
<div ng-disabled="!item.editMode">
<div>
<input type="text" class="card-input" ng-model="item.content" ng-disabled="!item.editMode" />
</div>
<select ng-options='status as status.color for status in statuses track by status.id' ng-model='item.class' ng-disabled="!item.editMode">
</select>
</div>
<div class="bottom-check">
<input type="checkbox" ng-model="item.editMode" /> Edit Mode
</div>
</li>
</ul>
</div>
</body>
</html>
/* Put your css in here */
html,
body{
height: 100%;
}
.myItem{
border: solid grey 1px;
padding: 10px;
}
input[type="text"]{
width: 100%;
}
.red{
background-color: red;
}
.green{
background-color: green;
}
.yellow{
background-color: yellow;
}
.card-input{
background-color: transparent;
border: none;
}
.bottom-check{
position: relative;
display: block;
}
div[gridster]{
border: 1px solid black;
padding-left: 0 !important;
}
.section{
border: 1px solid black;
}
.column{
border-right: 1px solid black;
display: inline-block;
float: left;
width: 150px;
height: 100%;
}
.column.first-column{
width: 120px;
margin-left: 0 !important;
}
.gridster{position:relative;margin:auto;height:0}.gridster-content>ul{margin:0;list-style:none;padding:0}.gridster-item{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;list-style:none;z-index:2;position:absolute;display:none}.gridster-loaded{-webkit-transition:height .3s;-moz-transition:height .3s;-o-transition:height .3s;transition:height .3s}.gridster-loaded .gridster-item{display:block;position:absolute;-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-mobile{height:auto !important}.gridster-mobile .gridster-item{height:auto;position:static;float:none}.gridster-preview-holder{display:none;z-index:1;position:absolute;background-color:#ddd;border-color:#fff;opacity:0.2}.gridster-item.gridster-item-moving,.gridster-item.gridster-preview-holder{-webkit-transition:none;-moz-transition:none;-o-transition:none;transition:none}.gridster-item.ng-leave.ng-leave-active{opacity:0}.gridster-item.ng-enter{opacity:1}.gridster-item-moving{z-index:3}.gridster-item-resizable-handler{position:absolute;font-size:1px;display:block}.handle-se{cursor:se-resize;right:1px;bottom:1px}.handle-ne{cursor:ne-resize;width:12px;height:12px;right:1px;top:1px}.handle-nw{cursor:nw-resize;width:12px;height:12px;left:1px;top:1px}.handle-sw{cursor:sw-resize;width:12px;height:12px;left:1px;bottom:1px}.handle-e{cursor:e-resize;width:12px;bottom:0;right:1px;top:0}.handle-s{cursor:s-resize;height:12px;right:0;bottom:1px;left:0}.handle-n{cursor:n-resize;height:12px;right:0;top:1px;left:0}.handle-w{cursor:w-resize;width:12px;left:1px;top:0;bottom:0}.gridster .gridster-item:hover .gridster-box{border:1.5px solid #B3B2B3}.gridster .gridster-item:hover .handle-se{border-style:solid;border-width:0 0 13px 13px;border-color:transparent transparent #ccc}