拖放

Drag and Drop

交互模式也叫：拖拽、拖入、DnD

一句话：把一个东西拖起来放到另一个区域，比如把文件拖进上传框、把卡片拖到看板的另一列。

详细解释

拖放强调「从 A 拖到 B」：来源和目标是不同的区域。典型场景有：把本地文件拖进上传区、把看板卡片拖到另一列来改变状态、把组件从左侧面板拖到画布上。如果只是在同一个列表里调整顺序，一般叫拖拽排序。

完整的拖放要有三种反馈：可拖的元素鼠标变成抓手；拖到目标区域上方时，目标区域高亮（边框变实线、背景变深）；放下后给出结果，比如文件开始上传、卡片出现在新的一列。

拖放对手机和键盘用户不够友好，所以要保留替代入口：上传区同时支持「点击选择文件」，看板卡片可以在菜单里选「移动到…」。

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

做一个文件上传区：虚线边框的大方框，中间写「拖拽文件到这里，或点击选择」；文件拖到上方时边框变实线、背景变浅灰；松开后在下方列出文件名和上传进度条；只接受 PDF 和图片，其他类型提示不支持。