<div class="my-content-list" v-draggable="[ nameList, { animation: 300, } ]" :onStart="onStart" :onUpdate="onUpdate"> <div class="my-content-list-item" v-for="(item, index) in nameList" :key="item.id"> {{ item.functionName }} <SvgIcon name="home-close" class="btn-close" @click="deleteSelectData(item, index)" /> </div> </div>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
import { vDraggable } from 'vue-draggable-plus'
const onStart = () => { // console.log(nameList.value) } const onUpdate = (e: any) => { console.log(e.newIndex, e.oldIndex) moveToThird(nameList.value, e.oldIndex, e.newIndex); console.log(nameList.value) } const moveToThird = (arr: any, index: number, insert: number) => { // 移除数组中指定索引的元素,并在第三个位置插入该元素 const element = arr.splice(index, 1)[0]; arr.splice(insert, 0, element); return arr }