如何在拖放图块后重新排列要排序的数组？

Question

我有一系列瓷砖，从以下位置开始：

<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 }
];

由于这是一个网格布局，任何一个“项目”都可以拖放到新位置。

问题： 如何创建按布局位置排序的数组？因此，最左边的图块是索引0，每次布局重新洗牌时，最右边的图块是最后一个索引项目？

plunkr