实现拖拽案例

布局代码（示例）

<template v-for="(item, index) in codeList">
    <div @click="setlPart(index)" :draggable="true" @dragstart="dragstart(item, index)" @dragenter="dragenter(item, index)" @dragend="dragend(item)" @dragover="dragover"
                        class="seltCodePart" v-if="item.name">
   <div class="codePart-name"> {{ item.name }} </div>
       <el-icon class="code-del" @click="handDelTabs(index)">
           <Close />
       </el-icon>
    </div>
</template>

js代码

//  拖动
const draggingIndex = ref(null) // 正在拖拽的元素索引
const overIndex = ref(null) // 鼠标悬停的元素索引

// 拖动开始 记录索引
function dragstart(item, index) {
    draggingIndex.value = index
}

// 拖动结束 更新数组顺序
function dragend(item) {
    if (draggingIndex.value !== overIndex.value) {
        const movingItem = codeList.value[draggingIndex.value]
        codeList.value.splice(draggingIndex.value, 1)
        codeList.value.splice(overIndex.value, 0, movingItem)
    }
    draggingIndex.value = null
    overIndex.value = null
}

// 进入拖动更新overIndex -lxf 
function dragenter(item, index) {
    overIndex.value = index
}

// 拖动时处理 拖拽过程中组织默认行为

function dragover(event) {
    event.preventDefault();
}