动手：拖拽排序列表

你要做什么

一个可拖拽排序的待办列表，拖住某项上下移动来调整顺序。

⏱️ 20 分钟 | 🛠️ Vue 3 + HTML5 Drag API

跟着做

帮我做一个拖拽排序列表（Vue 3）：
1. 列表项可以上下拖动调整顺序
2. 拖动时有视觉反馈：正在拖的项半透明，目标位置高亮
3. 用 HTML5 原生的 Drag & Drop API 实现
4. 列表包含序号、文字内容、删除按钮
5. 支持添加新项目
6. 样式简洁现代

核心概念

拖拽排序的三个关键事件：

• dragstart — 开始拖动，记录被拖的是哪一项
• dragover — 经过某个位置，显示可以放下的提示
• drop — 放下，交换位置

🎯 进阶挑战

• 加上拖拽时的平滑动画
• 数据保存到 localStorage，刷新不丢失
• 支持多列拖拽（像 Trello 的看板）

✅ 你做到了

• 掌握了 HTML5 Drag & Drop API
• 理解了拖拽排序的实现原理
• 做了一个可以直接用的交互组件