返回产品瞬间
Motion Pack 23 · 内容变化

看板移动

任务跨列移动时,让拾取、目标列和完成计数共同说明它的新位置。

实时预览看板移动
待处理
进行中
检查动效
已完成
看板移动: 已移动 进行中

实现一个看板移动:任务卡可以拖到相邻列,也可以通过按钮移动。拖动时强调拾取状态,落下后任务进入目标列并更新列计数。保持两列布局稳定,并提供减弱动效版本。

动效规则

落点列和列计数一起确认任务的新位置。

减弱动效

保留移动结果和计数变化,省略拖动时的透明度与缩放。

实现

HTML、CSS 与行为所需的 JavaScript 一起复制。