i have array of tiles start off in 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 gridster layout, 1 "item" can dragged , dropped new located. problem: how can create array ordered layout position? topmost left tile index 0, , bottom-most right tile last indexed item everytime layout reshuffled? plunkr