javascript - How can I dynamically reorder an array after a tile is dragged and dropped? -
i have application has array (selectedtiles). each tile in array has 2 properties dictate location of tile on page layout (col(umn) , row).
<div gridster> <ul> <li gridster-item="item" ng-repeat="tile in selectedtiles"></li> </ul> </div> problem behavior: when move tile (ex: swap 2 tiles), 'tile.col' , 'tile.row' properties change values each tile correspond new grid position. order of indexed array stays same. makes keyboard navigation unordered if moving next tile next index position.
*goal behavior therefore, need create new array pushes each tile in selectedtiles new array takes tile.col , tile.row properties , sorts them, so:
$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 } ]; that way index order follows pattern of having top-most left tile index[0] , bottom-most right tile last index in array everytime tile moved.
i haven no idea how
if understood question correctly, trying sort array based on row/col values after have been changed. below 1 way it. i've added id property each element make happen obvious.
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)); let's row/col values have been changed, sort this:
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 } ]; into following (you can copy whatever structure need reflect on screen) :
[ {"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} ] 