How to get the new list as an array?

[idesignzone]

I have trouble getting the new array list.
here is my code

<template>
  <div>
    <Sortable :list="elements" item-key="id" tag="div" :options="options" @change="DragableData($event)">
      <template #item="{ element, index }">
        <div :key="element.id">
          {{ index }} - {{ element.name }}
        </div>
      </template>
    </Sortable>
  </div>
</template>

<script setup>
const elements = [
  { id: "1", name: "one" },
  { id: "2", name: "two" },
  { id: "3", name: "three" },
  { id: "4", name: "four" },
];
const options = {sort: true};

function DragableData(data) {
  console.log(data)
}
</script>

data here does not have any array in it. is it possible to get new array?

[eazyurk]

I did the following on the Sortable element I added:
@end="(event) => onEnd(event)"

Then the onEnd function:

function onEnd(event) {
    array.splice(event.newIndex, 0, array.splice(event.oldIndex, 1)[0]);
}

[whoacowboy]

@idesignzone, @eazyurk 's solution was causing some weirdness for me. Items could be out of sync.

The below works a little better for me FWIW.

function onEnd(event) {
  const movedItem = array.splice(event.oldIndex, 1)[0] // Remove the item
  array.splice(event.newIndex, 0, movedItem) // Insert at the new index
}