当前位置：首页 > news >正文

Vue 3 拖拽排序功能优化实现：从原理到实战应用

news 2025/8/1 18:05:50

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

在现代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>