How to move an item in an array without updating all the others?

I have an Array composed of Objects, such as :

const items = [
    { id: 0, title: 'Object 1', sort: 0 },
    { id: 1, title: 'Object 2', sort: 1 },
    { id: 2, title: 'Object 3', sort: 2 },
    { id: 3, title: 'Object 4', sort: 3 },
    { id: 4, title: 'Object 5', sort: 4 },
    { id: 5, title: 'Object 6', sort: 5 },
    { id: 6, title: 'Object 7', sort: 6 },
    { id: 7, title: 'Object 8', sort: 7 },
    { id: 8, title: 'Object 9', sort: 8 }
]

Using a dragging library (Sortable.js via VueDragguable), I receive the "onChange" event, which contains the following details :

element: The element moved, for instance, { id: 2, title: 'Object 3', sort: 2 }
newIndex: The new position for this element, such as 6
oldIndex: The old position, here, 3

When a change event is fired (with the move specifically, not add or remove), I'd like to update the sort property in the objects that are affected by the change, by modyfing the least number of objects (in order to reduce the number of writes in the database).

How could I do that?

Note: The "sort" parameter here is arbitrary. If a better way is possible, I can update the code accordingly.

Solution

In your case, you can simply move the item in your array to the right place using the splice method and then check if your items have the right place.

You can find all wrong items using the filter method with a comparison with those indexes.

const items = [
    { id: 0, title: 'Object 1', sort: 0 },
    { id: 1, title: 'Object 2', sort: 1 },
    { id: 2, title: 'Object 3', sort: 2 },
    { id: 3, title: 'Object 4', sort: 3 },
    { id: 4, title: 'Object 5', sort: 4 },
    { id: 5, title: 'Object 6', sort: 5 },
    { id: 6, title: 'Object 7', sort: 6 },
    { id: 7, title: 'Object 8', sort: 7 },
    { id: 8, title: 'Object 9', sort: 8 }
]

const event = {
  element: { id: 2, title: 'Object 3', sort: 2 },
  newIndex: 6,
  oldIndex: 2
}

// removing the item
items.splice(event.oldIndex, 1)

//replacing it
items.splice(event.newIndex - 1, 0, event.element)

const itemsToUpdateInDatabase = items.filter((item, index) => item.sort !== index)

console.log(itemsToUpdateInDatabase)