I have an array of tiles that start off in the following position:
<div gridster>
<ul>
<li gridster-item="item" ng-repeat="item in standardItems"></li>
</ul>
</div>
$scope.standardItems = [
{ sizeX: 2, sizeY: 1, row: 0, col: 0 },
{ sizeX: 2, sizeY: 2, row: 0, col: 2 },
{ 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 },
{ sizeX: 2, sizeY: 1, row: 2, col: 1 },
{ sizeX: 1, sizeY: 1, row: 2, col: 3 },
{ sizeX: 1, sizeY: 1, row: 2, col: 4 }
];
As this is a gridster layout, any one "item" can be dragged and dropped to a new located.
Problem: How can I create an array that is ordered by the layout position? So that the topmost left tile is the index 0, and the bottom-most right tile is the last indexed item everytime the layout is reshuffled?