拖拽
Drag
初级通用拖拽(Drag)是按住鼠标按键、移动指针,再松开按键的一段连续操作。它让你通过移动来调整位置或数值,比如在看板中把任务卡片移到另一列。
你可能会说:「我想用鼠标按住任务卡片,把它挪到另一列,松手后才完成移动。」
动手看看看板任务卡片拖拽
待处理 · 2
整理新版帮助文档周四前完成初稿
进行中 · 1
拖拽阶段
把鼠标移到卡片上,再按住看看:悬停提示它可操作,按下时卡片轻微缩小,表示已经抓住。切换「拖拽阶段」可模拟移动和松开;这里不能真的跨列拖放。
静止时卡片留在「待处理」,阴影较浅,不会让人误以为它正在移动。
要点一次拖拽是怎么完成的?
- 1
从按住到松开是一段操作
你按住卡片时只是开始操作;移动鼠标后,界面跟着显示卡片的位置;松开时,系统才知道你想把它放在哪里。把这几步连起来看,才能判断一次拖拽是否完成。
- 2
移动过程要让结果可预期
做看板时,我们可以在目标列显示一个占位位置。因为用户还没松手,这时先展示将要放入的位置,比直接改动任务数据更容易让人判断下一步会发生什么。
- 3
起点终点决定最终动作
同样是拖动文件,从桌面拖进上传区域是添加文件,拖到区域外则不该触发上传。实现时要明确哪些对象能被拖、哪些位置能接收,以及松手后如何处理结果。
容易混淆的地方
拖拽和点击都从按下鼠标开始,但点击通常是在原处松开后触发动作;拖拽关注按住期间的移动,以及松手时的位置。它也不等于悬停:悬停只需要指针移到对象上,不需要按住。这样区分后,你就能向 AI 说清楚,卡片是点击打开详情,还是拖动改变所属列。
什么时候用
适合用
- 在项目看板里移动任务卡片,用户需要直观看到卡片将落入哪一列、哪个位置。
- 在图片编辑器里移动画布上的元素,位置跟着鼠标变化,松手后保留新位置。
- 在文件管理界面里把文件拖进文件夹,用目标位置表达要移动到哪里。
不适合用
- 只是打开任务详情时,用点击卡片或明确的链接;这里没有位置变化,不需要拖拽。
- 在表单里从几个固定状态中选一个时,用单选框或选择器更直接,不必让用户拖动。
- 只是上传一个文件、无需指定放置位置时,用文件选择按钮就够了,不必把拖拽设为唯一入口。
练一练选一个答案,看看解释
你在做任务看板:用户想把卡片移到另一列,也要能点击卡片查看详情。哪种交互最符合这两个目标?
让 AI 帮你做复制给 AI Agent 直接用
请给任务看板加入卡片拖拽:按住并移动时显示卡片将落入的位置,只允许放进有效的任务列,松手后再更新所属列和顺序;点击未移动的卡片仍打开详情,并提供不依赖拖拽的移动方式。