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

在現代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. 高度可定制：可根據需求擴展功能

未來可能的改進方向：

• 集成更多動畫效果

• 實現更復雜的嵌套拖拽場景

希望這篇文章能幫助你構建出體驗優秀的拖拽排序功能！在實際項目中，記得根據具體需求調整實現細節，并做好性能測試。