核心在于用reactive管理看板列与卡片数组，拖拽结束时通过splice直接修改数组顺序触发响应式更新，配合唯一card.id作为v-for的key确保渲染稳定。
在 Vue 3 中用 reactive 实现拖拽看板（如 Trello 风格）的卡片位置实时交换，核心在于：**用响应式数组管理列表，结合 HTML5 Drag & Drop API 或更可靠的第三方库（如 SortableJS），并在拖拽结束时直接修改 reactive 数组的顺序——Vue 会自动触发视图更新。**
1. 用 reactive 管理看板数据结构
每个看板列（column）是一个对象，包含 id 和 cards 数组；所有列存于一个 reactive 数组中。卡片本身也需是 reactive 对象（或至少含 id、title 等基础字段），确保内部属性变更也可响应。
示例：
import { reactive } from 'vue'
<p>const board = reactive({
columns: [
{
id: 'todo',
title: '待办',
cards: reactive([
{ id: 'c1', title: '需求评审' },
{ id: 'c2', title: '接口联调' }
])
},
{
id: 'doing',
title: '进行中',
cards: reactive([
{ id: 'c3', title: 'UI 切图' }
])
}
]
})
</p>注意：cards 数组必须用 reactive 包裹（不能只用 ref 或普通数组），否则 splice / push / move 等操作不会触发更新。
2. 拖拽逻辑：在 drop 时直接修改 reactive 数组
不依赖虚拟 DOM diff 或 key 强制重排，而是真实地移动数组元素。关键操作是：从源列删除卡片 + 插入到目标列指定位置。
推荐使用 Array.splice() 安全移动：
- 用
sourceCards.splice(index, 1)删除被拖卡片（返回数组，取 [0]） - 用
targetCards.splice(dropIndex, 0, card)插入到目标位置（支持中间插入） - Vue 能监听到 splice 引起的 length 和索引变化，自动更新列表渲染
示例方法：
function handleCardDrop({ card, sourceColumnId, targetColumnId, dropIndex }) {
const sourceCol = board.columns.find(c => c.id === sourceColumnId)
const targetCol = board.columns.find(c => c.id === targetColumnId)
<p>// 从源列移除
const cardIndex = sourceCol.cards.findIndex(c => c.id === card.id)
if (cardIndex !== -1) {
sourceCol.cards.splice(cardIndex, 1)
}</p><p>// 插入到目标列指定位置（dropIndex 是鼠标松开时的视觉序号）
if (dropIndex >= targetCol.cards.length) {
targetCol.cards.push(card)
} else {
targetCol.cards.splice(dropIndex, 0, card)
}
}
</p>3. 模板中正确使用 v-for 和 key
确保列表渲染稳定，避免因 key 冲突导致状态错乱：
- 每张卡片的
key必须唯一且稳定（推荐用:key="card.id"） - 不要用 index 当 key，否则数组重排时 Vue 会复用旧组件实例，引发状态混乱
- 列容器和卡片容器都应有明确的 key（如 column.id）
模板片段：
<div v-for="column in board.columns" :key="column.id" class="column">
<h3>{{ column.title }}</h3>
<div class="card-list" column.id>
<div v-for="card in column.cards" :key="card.id" draggable card column.id class="card">
{{ card.title }}
</div>
</div>
</div>
4. 补充建议：提升体验与健壮性
-
禁用原生拖拽样式：给卡片加
draggable="true"后，全局加 CSS* { -webkit-user-drag: none; }防止文字误选 -
跨列拖拽需标识目标列：可在
@dragenter时高亮目标列，@dragleave取消，@drop执行交换 - 撤销/重做支持：将每次拖拽前的 board.columns 结构深拷贝存入历史栈（可用 toRaw + JSON.parse(JSON.stringify())）
-
移动端适配：HTML5 DnD 在 iOS/Android 支持有限，生产环境建议用
SortableJS + VueUse useSortable封装，它自动处理 touch 事件并兼容 reactive
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
