Javascript 是否可以在重新排序期间修改内部集合的索引

我有一个对象数组：

$scope.widgets = [{
    col: 0,
    name: "Tile 1"
}, {
    col: 1,
    name: "Tile 2"
}, {
    col: 2,
    name: "Tile 3"
}];

每个对象都表示为网格中的一个小部件。对于ng repeat的每次迭代，将在其各自的位置（列，行）创建一个新的小部件：

我发现数组中的对象在重新排序时会通过双向绑定根据位置（列/行）相应地更改其属性，但它们的索引不会反映此更改。例如，如果用户交换了分片1（索引0）和2（索引1），则属性将更新，但对象从不交换阵列中的位置

是我的小提琴，它演示了属性“行”和“列”在网格上移动平铺时的变化，但索引从未改变。是否可以根据ng repeats项目的当前位置对集合重新排序

例如：

---

用户将平铺2拖动到平铺1的位置。磁贴2现在应该成为索引0，磁贴1现在应该成为索引1

基本解决方案是，您需要定义一个回调函数，每当停止拖动

$scope.widgets

数组时，该函数将对数组进行排序

我对完整的解决方案很满意，但以下是要点：

指定拖动回调 将以下键添加到gridster选项：

draggable: {
    enabled: true,
    stop: function (event, $element, widget) {
        sortWidgets();
    }
}

编写排序代码 如果您使用的是or，则可以使用

.sortBy（）

函数轻松完成此操作。或者，您也可以在本机JS中这样做：

function sortWidgets() {
    $scope.widgets.sort(function (widget1, widget2) {
        return position(widget1) - position(widget2);
    });
}

function position(widget) {
    return (widget.row || 0) * $scope.gridConfig.columns + widget.col;
}

将跟踪方式用于ng repeat 假设您的实际小部件更复杂，我建议您在

ng repeat

中添加一个

track by

表达式，以便它在排序后为小部件重用与排序前相同的DOM节点。您最好现在就加入这个小型性能优化，而不是等到事情变得缓慢

function sortWidgets() {
    $scope.widgets.sort(function (widget1, widget2) {
        return position(widget1) - position(widget2);
    });
}

function position(widget) {
    return (widget.row || 0) * $scope.gridConfig.columns + widget.col;
}