用途:拖拽(Drag and Drop)模式用于让用户以空间化方式移动或排序项目,同时保留清晰反馈、键盘替代方案与安全恢复路径。适合需要可排序列表和优先级调整的团队。
主要能力:支持可排序列表与优先级调整、跨阶段移动卡片、上传或放置手势。相比相邻模式,应减少操作摩擦,但不隐藏状态、规则或恢复路径。
使用方式:先确认模式与问题和约束匹配,再从references/pattern.md中的结构与示例入手,选择最小可行变体。先应用无障碍、性能和交互防护,再做视觉打磨。使用测试指南验证键盘、屏幕阅读器、响应式与失败场景下的行为。
限制与避免:当直接操作更难学习时,应使用显式按钮或菜单;若界面必须良好支持纯键盘使用,避免重手势行为;存在更清晰替代方案时,不要强制拖拽或悬停。
无障碍要点:验证仅用键盘即可完成拖拽;保持焦点顺序合理;保留高缩放下仍可读的可见焦点状态。优先使用语义元素,仅在语义不足时添加ARIA;在正确位置以正确礼貌级别播报错误、加载或完成等状态变化;用aria-describedby或结构标题连接标签、提示与状态文本;不要仅靠颜色传达严重程度、完成或选择状态。
性能要点:避免每次指针移动都重渲染整个集合,仅更新占位符位置;使用稳定条目高度或预览几何,防止拖拽时列表不可预测地移动;当界面条目很多时,节流昂贵的碰撞或排序计算。
常见错误:只设计顺利路径,忽略加载、空和失败状态;让交互与内容脱节;把无障碍当作最后一步。应指定完整生命周期,保持信息架构靠近交互模型,并在首次实现中融入语义、焦点行为与播报。
相关模式包括看板、列表视图、图片上传。完整实现细节、示例和测试说明见references/pattern.md。