交互练习 · 跟做练习
初中 · 13–15 岁可以独立完成社团场景
做一块可以拖动的故事板
把图片或任务卡拖到不同位置，理解一次完整的按下、移动和放开。
- 看到第一个变化
- 15 分钟内
- 做出完整版本
- 120 分钟内
- 运行方式
- 下载 drag-n-drop 目录后直接打开 index.html
- 使用的积木
- HTML / CSS / JavaScript / Drag and Drop API
FIRST VISIBLE CHANGE
先做这一件事
替换示例图片或卡片文字，拖到另一个容器并确认状态变化。
CREATOR LOOP / 创造者六环
前五环长能力，最后一环长身份。
- 语文与表达
- 社会与人文
- 艺术
- 01问题
选择一个值得重新讲述的校园、社区或地方文化故事，提出自己的叙事角度。
- 02知识
学习事件顺序、因果关系和资料来源，判断怎样排列会改变读者理解。
- 03工具
用拖放事件和三个自定义分区，制作可以重新编排的数字故事板。
- 04作品
完成至少五张真实内容卡片、能拖动排序并清楚提示落点的故事板。
- 05反馈
请同伴重新排列并解释他的顺序，再比较两种叙事为什么产生不同理解。
- 06身份
能够署名说明自己选择了什么视角、舍弃了什么材料，以及为何这样讲述。
你必须亲自做
- 选择故事视角、资料和三种分区规则
- 决定卡片顺序并解释取舍背后的意义
AI 可以帮助
- 解释拖放事件与视觉状态的关系
- 协助检查交互边界、键盘替代说明和卡片结构
完成前要验证
- 核对每份资料来源，并让真实同伴完成一次重新排序
三段路径 · 自动保存在本机
从第一个变化，到你的版本
0/ 3 步
0115 分钟
- 替换一张卡片
- 拖到另一列
- 观察拖动状态
做完的标志：自己的内容可以被拖动并正确落下。
0245 分钟
- 修改悬停样式
- 增加分区标题
- 处理拖出区域
做完的标志：用户始终知道卡片将放到哪里。
032 小时
- 定义三个分区
- 加入五张真实卡片
- 请朋友重新排列
做完的标志：朋友能用它完成一次排序并解释选择。
AI 协作提示词
让 AI 带路，不让它抢走决定
请先用“拿起—经过—放下”解释 dragstart、dragover、drop 等事件，并指出 CSS 状态类什么时候变化。我会决定故事板的三个分区与卡片内容，你只帮我逐步替换结构并检查拖放边界。