vue3<draggable></draggable>的moved事件怎么读取属性oldindex和newindex

在`<draggable>`组件中，`moved`事件的回调函数会接收三个参数，分别是`event`、`originalEvent`和`draggedElement`。其中，`draggedElement`是被拖拽的元素，而`oldIndex`和`newIndex`属性则可以通过`draggedElement`的`data`属性来获取。具体实现可以参考以下示例代码：

<template>
  <div>
    <draggable v-model="list" @moved="onMoved">
      <div v-for="(item, index) in list" :key="item.id">
        {{ item.title }}
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { id: 1, title: 'Item 1' },
        { id: 2, title: 'Item 2' },
        { id: 3, title: 'Item 3' },
      ],
    }
  },
  methods: {
    onMoved(event, originalEvent, draggedElement) {
      const oldIndex = draggedElement.dataset.oldIndex
      const newIndex = draggedElement.dataset.newIndex
      console.log('Old Index:', oldIndex)
      console.log('New Index:', newIndex)
    },
  },
}
</script>

在上述示例代码中，我们在`<draggable>`的每个子元素上使用了`v-for`指令来渲染列表数据，并且通过在每个子元素上添加`data-old-index`和`data-new-index`属性来保存拖拽前后的索引值。然后，在`moved`事件的回调函数中，我们可以通过`draggedElement`的`dataset`属性来获取这两个属性的值，并进行相应的处理。