一、引言：为什么需要拖拽排序？

在现代Web应用中，交互体验越来越受到重视。拖拽排序(Drag and Drop)作为一种直观的用户交互方式，被广泛应用于：

• 任务管理工具（如Trello的任务卡片排序）

• 内容管理系统（CMS中的模块排序）

• 电商平台（商品分类排序）

• 表单构建器（字段顺序调整）

• 多媒体画廊（图片/视频排序）

本文将带你深入理解Vue 3中实现高效拖拽排序的技术方案，并提供优化后的实现代码。

二、技术选型对比

1. 原生HTML5拖放API

优点：

• 零依赖，浏览器原生支持

• 性能较好

• 适合简单场景

缺点：

• API较为底层

• 移动端支持有限

• 自定义样式困难

2. 第三方库（如SortableJS、Vue.Draggable）

优点：

• 功能丰富

• 跨平台支持好

• 社区活跃

缺点：

• 包体积增大

• 自定义程度受限

• 可能产生不必要的抽象层

3. Vue 3组合式API实现（本文方案）

优势：

• 完全可控

• 体积轻量

• 深度集成Vue响应式系统

• 易于扩展和定制

三、核心实现原理

1. HTML5拖放事件体系

// 关键事件
@dragstart="handleDragStart"  // 拖拽开始
@dragenter="handleDragEnter"  // 进入目标区域
@dragover.prevent            // 在目标区域移动（必须preventDefault）
@dragend="handleDragEnd"     // 拖拽结束

2. Vue响应式数据流

// 使用ref维护状态
const draggingItemId = ref<string | null>(null)
const targetItemId = ref<string | null>(null)// 计算属性实现自动排序
const sortedItems = computed(() => {return [...items.value].sort((a, b) => {// 自定义排序逻辑})
})

3. DOM操作优化

// 现代DOM API实现高效元素移动
if (targetIndex > draggingIndex) {targetElement.after(draggingElement) // 向后移动
} else {targetElement.before(draggingElement) // 向前移动
}

四、优化实现代码

<template><div class="drag-sort-container"><div class="menu-area" ref="listRef" @dragover.prevent><div v-for="item in sortedFruits" :key="item.id" :id="item.id" draggable="true" class="menu-item"@dragstart="handleDragStart($event, item.id)" @dragenter="handleDragEnter($event, item.id)"@dragend="handleDragEnd" :class="{ 'dragging': draggingItemId === item.id }">{{ item.title }}</div></div></div>
</template><script setup lang="ts">
import { ref, computed } from 'vue'interface Fruit {id: stringtitle: string
}const fruits: Fruit[] = [{ id: "1", title: "苹果" },{ id: "2", title: "香蕉" },{ id: "3", title: "橙子" },{ id: "4", title: "草莓" },{ id: "5", title: "葡萄" }
]const listRef = ref<any>(null)
const draggingItemId = ref<string | null>(null)
const targetItemId = ref<string | null>(null)// 使用计算属性实现响应式排序
const sortedFruits = computed(() => {// 这里可以根据需要添加排序逻辑return [...fruits]
})const handleDragStart = (event: DragEvent, id: string) => {draggingItemId.value = idevent.dataTransfer?.setData('text/plain', id)event.dataTransfer!.effectAllowed = 'move'// 添加拖动样式 延时器防止吞掉setTimeout(() => {const target = event.target as HTMLElementtarget.classList.add('dragging')}, 0)
}const handleDragEnter = (event: DragEvent, id: string) => {event.preventDefault()if (!draggingItemId.value || draggingItemId.value === id) returntargetItemId.value = id// 获取DOM元素const children = [...listRef.value?.children || []]const draggingElement = children.find(el => el.id === draggingItemId.value)const targetElement = children.find(el => el.id === targetItemId.value)if (!draggingElement || !targetElement) return// 交换位置const targetIndex = children.indexOf(targetElement)const draggingIndex = children.indexOf(draggingElement)if (targetIndex > draggingIndex) {targetElement.after(draggingElement)} else {targetElement.before(draggingElement)}
}const handleDragEnd = (event: DragEvent) => {const target = event.target as HTMLElementtarget.classList.remove('dragging')// 更新数据顺序const newOrder = [...listRef.value?.children || []].map(el => el.id).filter(id => fruits.some(f => f.id === id))// 这里可以触发数据更新，例如emit事件或调用APIconsole.log('新顺序:', newOrder)// 重置状态draggingItemId.value = nulltargetItemId.value = null
}
</script><style scoped>
.drag-sort-container {padding: 20px;
}.menu-area {display: flex;flex-wrap: wrap;gap: 10px;border: 1px solid #eee;padding: 10px;min-height: 100px;
}.menu-item {padding: 12px 16px;background-color: #f5f5f5;border-radius: 4px;cursor: move;user-select: none;transition: all 0.3s ease;
}.menu-item:hover {background-color: #e0e0e0;
}.menu-item.dragging {opacity: 0;background-color: #e0e0e0;
}
</style>

本文实现的Vue 3拖拽排序方案具有以下优势：

1. 轻量高效：仅依赖Vue 3原生API

2. 响应式友好：完美融入Vue的响应式系统

3. 高度可定制：可根据需求扩展功能

未来可能的改进方向：

• 集成更多动画效果

• 实现更复杂的嵌套拖拽场景

希望这篇文章能帮助你构建出体验优秀的拖拽排序功能！在实际项目中，记得根据具体需求调整实现细节，并做好性能测试。