拖拽Drag

你可能会说

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

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

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

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

你可以这样告诉 AI Agent

请完善任务排序：提供明确拖拽手柄、被拖状态和落点占位，同时增加上移、下移按钮。不要把整张卡片都设成拖拽区。请用鼠标、触屏和键盘调整同一张卡片，并确认最终顺序一致。

组成结构 · Anatomy

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

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

跟着指针走的半透明分身

松手后会落进去的位置

按钮也能完成同样的事

常见变体 · Variants

列表排序Reorder

ABC

任务、看板拖动排序

拖放区域Drop Zone

拖文件到这里

文件拖进区域上传

拖拽手柄Handle

⠿ 任务 B

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

典型使用场景

看板拖动任务卡

待办 · 1

接口联调

进行中 · 2

首页视觉走查

放到这一列

登录页改版

文件拖拽上传

📎 设计规范.md

⬆

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

设计规范.md · 2.4 MB

列表拖拽排序

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

调整面板宽度

文件

预览

↔ 320 px

A. 把整张卡片设成拖拽区，取消文字选择和普通点击B. 只支持拖拽，并用更大的阴影表示抓取成功C. 显示拖拽手柄和落点，同时提供上移、下移操作