看板拖拽（Kanban Drag & Drop）是什么：效果预览与 AI 设计提示词

效果预览

待办

写落地页文案周四截止

改定价页高优

进行中

正在拖动我…试试拖动

已完成

定品牌色 ✓

适合用在哪

项目管理、CRM 阶段、招聘流程、内容排期。

容易踩的坑

只支持鼠标拖拽，没有键盘移动方案，键盘与读屏用户无法改状态。
拖动时实时重排所有列触发大量布局，卡片超过 100 张明显卡顿。
落位后不做乐观更新，等接口返回才移动，卡片先弹回再跳过去。

设计提示词 · Prompt

看板拖拽（Kanban Drag & Drop）：多列布局，卡片可跨列拖动——拖起时卡片 rotate(2-4°) + scale(1.03) + 大投影（"被拎起来"的感觉），原位置留半透明占位坑；悬停目标列时该列出现虚线落点框。HTML5 Drag API 够用但动画生硬，dnd-kit / Sortable.js 是正解。触屏要单独适配（长按 200ms 触发拖动，防误滚）。卡片内容：标题 + 标签 + 头像。列头显示计数徽章。松手时卡片落位动画（scale 回弹）收尾。

Kanban Drag & Drop: Multi-column layout with cards draggable across columns — on pickup the card gets rotate(2-4°) + scale(1.03) + a large shadow (the "lifted" feel), leaving a semi-transparent placeholder slot in its original position; hovering over a target column shows a dashed drop zone in that column. The HTML5 Drag API works but animates stiffly; dnd-kit / Sortable.js is the right answer. Touchscreens need separate handling (long-press 200ms to start dragging, preventing accidental scrolls). Card content: title + tags + avatar. Column headers show a count badge. Finish with a drop animation (scale bounce) on release.

常见搭配

同一页面里经常和「看板拖拽」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

仪表盘布局Dashboard Layout 轻提示Toast Notification 动态流Activity Feed 头像堆叠Avatar Stack

演示 HTML 结构

<div class="s d-kanban">
  <div class="d-kanban__col"><span class="d-kanban__cap">待办</span>
    <div class="d-kanban__card">写落地页文案<i>周四截止</i></div>
    <div class="d-kanban__card">改定价页<i>高优</i></div>
  </div>
  <div class="d-kanban__col"><span class="d-kanban__cap">进行中</span>
    <div class="d-kanban__card d-kanban__card--drag">正在拖动我…<i>试试拖动</i></div>
  </div>
  <div class="d-kanban__col"><span class="d-kanban__cap">已完成</span>
    <div class="d-kanban__card">定品牌色 ✓</div>
  </div>
</div>