36. 🖐️ 拖拽与排序交互 Drag & Drop Interactions ★★★★☆
🌏 Web 网页规范
- HTML5 原生拖拽 API (DragEvent) 封装
- dnd-kit / react-beautiful-dnd 性能处理
- 拖拽放置区 (Dropzone) 虚线高亮视觉反馈
📱 App 移动端规范
- 长按振动激活拖动 (Long Press gesture)
- 网格与列表元素随手势滑动实时重组排序
- 跨容器、跨应用跟手手势数据共享
Web 端依赖于精确的鼠标指针，使用 HTML5 原生 DragEvent 系列事件。高频操作是上传文件时的拖入高亮放置区（Dropzone）或网格栏目卡片的排列重组。
App 移动端缺少悬停指示，通过“长按 - 震动反馈 - 元素微缩放大”作为激活手势。拖动过程中列表项需伴随挤压动效以空出空位，松手后通过弹簧动效回弹对齐。
LIVE PLAYGROUND: 点按排序与列表卡片位置交换沙盒
点击列表卡片右侧的 ↑ 或 ↓ 按钮，实时控制卡片位置上下互换并体验重排惯性反馈
https://web.meta-ui.edu/dragdrop
🎨 设计语言系统规范
📏 Handoff 像素标注规范
🤖 AI Chatbot 提示词面板
🖐️ HTML5 原生拖拽排序演示 — 拖动 ☰ 手柄重新排列
- ☰ 📐 1. 布局 Layout
- ☰ 🎨 2. 色彩 Colors
- ☰ 🔤 3. 排版 Typography
- ☰ 🧩 4. 组件 Components
- ☰ 🌬️ 5. 间距 Spacing
☰ 拖拽手柄可重新排列列表顺序
卡片拖拽归类箱 (Drag & Drop Classification Box)
📱 数码卡片
👗 服饰卡片
拖入分类A (数码)
拖入分类B (服饰)
拖拽记录：暂无
📋 大模型统一 Prompt (LLM Prompt)