前端

拖拽Drag

你可能会说

这些卡片希望能按住拖动，换个顺序。

拖拽是一种按住元素并移动它的位置或把它放到目标区域的交互方式调整任务卡顺序、把文件拖进上传区时会用到 drag；过程中应显示被拖元素、可放置区域和落点占位。拖拽对键盘、触屏和手部操作不稳定的用户并不可靠，因此排序要提供上移下移等替代操作，上传也要保留文件选择按钮。

⠿ 任务 A ⠿ 任务 B 放到这里

按住卡片拖动，观察拖拽时的阴影和位置反馈；松手后恢复原位

组成结构 · Anatomy

⠿ 任务 B任务 B放到这里↑↓ 按钮替代

提示“能拖”，也圈定拖的热区

跟着指针走的半透明分身

松手后会落进去的位置

按钮也能完成同样的事

常见变体 · Variants

列表排序Reorder

ABC

任务、看板拖动排序

拖放区域Drop Zone

拖文件到这里

文件拖进区域上传

拖拽手柄Handle

⠿ 任务 B

需要明确标出可开始拖动的位置

典型使用场景

看板拖动任务卡

待办 · 1

接口联调

进行中 · 2

首页视觉走查

放到这一列

登录页改版

文件拖拽上传

📎 设计规范.md

⬆

松开鼠标，上传到「项目文件」

设计规范.md · 2.4 MB

列表拖拽排序

⠿ 写需求文档放到这里 ⠿ 评审视觉稿 ⠿ 约客户访谈

调整面板宽度

文件

预览

↔ 320 px