在前端开发中，拖拽改变元素顺序是一个常见的需求，尤其是在实现可视化排序、表格调整、拖拽组件管理等场景中。比如，将列表中的某一项拖拽到前面或插入到指定位置，可以大大提升用户交互体验。
其实，实现拖拽排序并不复杂。核心思路是：
- 鼠标按下时记录拖拽元素的起始位置；
- 拖拽过程中实时追踪位置变化；
- 松开鼠标时，将元素放置到新的位置，并同步数据数组顺序。
在本文中，我将基于 Vue 3，不依赖任何第三方库，适合对 DOM 操作有更多自定义需求的场景，实现拖拽排序：
接下来，让我们逐步实现！🔥 以el-tag标签为例
<el-tag type="primary" @dragstart="dragstart($event, i)" @dragenter="dragenter($event, i)"
@dragover="dragover($event, i)" draggable="true" @dragend="dragEnd"
v-for="(item, i) in selectRows" style="margin-right:10px">{{ item.name }}</el-tag>
script代码
const selectRows = ref<any>([])//数据列表
let startIndex = null
let endIndex = null
const dragstart = (e, index) => {
startIndex = index
// console.log(e, index)
}
const dragenter = (e, index) => {
endIndex = index
}
const dragEnd = () => {
if (startIndex != endIndex) {
const fifthItem = selectRows.value.splice(startIndex, 1)[0]; // 移除 开始项
selectRows.value.splice(endIndex, 0, fifthItem); // 插入到最终位置
//此外，如果是调换位置可以这样写 [selectRows.value[startIndex], selectRows.value[endIndex]] = [selectRows.value[endIndex], selectRows.value[startIndex]]
}
}
const dragover = (e, index) => {
e.preventDefault()
}
注意：第一张图右下角那个标签是正在拖拽时的，没有把鼠标截上
