javascript - 拖放图 block 后如何动态重新排序数组？

Question

我有一个包含数组 (selectedTiles) 的应用程序。数组中的每个 Tile 都有 2 个属性，用于指示该图 block 在页面布局中的位置(Col(umn) 和 Row)。

link to plunkr

<div gridster>
    <ul>
        <li gridster-item="item" ng-repeat="tile in selectedTiles"></li>
    </ul>
</div>

问题行为: 当我移动一个图 block (例如:交换两个图 block )时，“tile.col”和“tile.row”属性会更改每个图 block 的值以对应于新的网格位置。但是索引数组的顺序保持不变。如果它移动到下一个索引位置的下一个图 block ，这会使键盘导航无序。

*目标行为 因此，我需要创建一个新数组，将 SelectedTiles 中的每个图 block 推送到一个新数组中，该数组采用 tile.col 和 tile.row 属性并对它们进行排序，如下所示:

$scope.selectedTiles = [
  { row: 0, col: 0 },
  { row: 0, col: 1 },
  { row: 0, col: 2 },
  { row: 0, col: 3 }.
  { row: 1, col: 0 },
  { row: 1, col: 1 },
  { row: 1, col: 2 },
  { row: 1, col: 3 },
  { row: 2, col: 0 },
  { row: 2, col: 1 },
  { row: 2, col: 2 },
  { row: 2, col: 3 }
];

这样，每次移动一个图 block 时，索引顺序都会遵循这样一种模式，即最左上角的图 block 作为索引[0]，最右下角的图 block 作为数组中的最后一个索引。

我不知道该怎么做

Answer 1

如果我对你的问题的理解正确，那么你试图在更改后基于行/列值对数组进行排序。下面是一种方法。我已将 id 属性添加到每个元素，只是为了使将要发生的事情变得显而易见。

function compare(a, b) {
  if (a.row < b.row) {
    return -1;
  } else if (a.row > b.row) {
    return 1;
  } else {
    if (a.col < b.col) {
      return -1;
    } else if (a.col > b.col) {
      return 1;
    } else {
      return 0;
    }
  }
}

var newItems = items.sort(compare);

console.log(JSON.stringify(newItems));

假设某些行/列值已更改，那么它将对此进行排序:

var items = [
      { row: 2, col: 3, id: 1 },
      { row: 0, col: 1, id: 2 },
      { row: 0, col: 2, id: 3 },
      { row: 0, col: 3, id: 4 },
      { row: 1, col: 0, id: 5 },
      { row: 1, col: 1, id: 6 },
      { row: 1, col: 2, id: 7 },
      { row: 1, col: 3, id: 8 },
      { row: 2, col: 2, id: 9 },
      { row: 2, col: 1, id: 10 },
      { row: 2, col: 0, id: 11 },
      { row: 0, col: 0, id: 12 }
      ];

进入以下内容(然后您可以将其复制回您需要在屏幕上反射(reflect)它的任何结构):

[
{"row":0,"col":0,"id":12},
{"row":0,"col":1,"id":2},
{"row":0,"col":2,"id":3},
{"row":0,"col":3,"id":4}, 
{"row":1,"col":0,"id":5},
{"row":1,"col":1,"id":6},
{"row":1,"col":2,"id":7},
{"row":1,"col":3,"id":8},
{"row":2,"col":0,"id":11},
{"row":2,"col":1,"id":10},
{"row":2,"col":2,"id":9},
{"row":2,"col":3,"id":1}
]