通过vue-draggable-plus实现一个简单的菜单拖拽功能

 <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>

 

 

 

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
}