In my code, I am working with an array of objects:
$scope.widgets = [{
col: 0,
name: "Tile 1"
}, {
col: 1,
name: "Tile 2"
}, {
col: 2,
name: "Tile 3"
}];
Each object from the array is displayed as a widget within a grid. When using ng-repeat, a new widget is created in its respective position (col, row) for each iteration:
<li gridster-item="widget" ng-repeat="widget in widgets">
While testing, I noticed that when objects are reordered, their properties in terms of position (col/row) are updated via two-way binding. However, the objects themselves do not change positions in the array based on their new order. For example, if the user switches tile 1 (index 0) and tile 2 (index 1), the properties are updated but the objects remain in the same positions within the array.
You can view a demo of this behavior here, where the 'row' and 'col' properties change as tiles are moved around the grid, but the index stays the same. Is it possible to reorganize the collection to reflect the current position of the ng-repeat item?
For example, if a user drags tile 2 to the position of tile 1, tile 2 should become index 0 and tile 1 should become index 1;