# 课程表

本页面是一个使用 HTML + CSS + 原生 JavaScript 实现的简易课程表制作工具，支持 直接编辑 与 拖拽填充课程，并可一键打印，适合作为教学示例或实际使用的小工具。

$include(/resource/html/drag-class.html)

# 一、页面结构说明

页面整体分为三个主要区域：

1. 左侧课程列表

2. 右侧课程表

3. 底部操作与提示区域

整体布局使用 flex 实现，左右分栏清晰，操作直观。

# 二、课程列表区域

左侧显示一个课程列表，每一项课程都是一个可拖拽的卡片：

• 课程数据由 JavaScript 中的数组 classList 定义

• 每个课程项使用 div 元素渲染

• 通过 draggable="true" 启用 HTML5 原生拖拽功能

• 样式上使用浅绿色背景，便于区分和拖拽识别

用户可以将任意课程从此列表拖入右侧课程表的单元格中。

# 三、课程表区域

右侧是一个标准的 HTML 表格，用于展示课程表结构。

# 1. 表格结构

• 表头为一周七天（星期一到星期日）

• 行按 上午 / 午休 / 下午 分区

• 使用 rowspan、colspan 合并单元格，结构清晰

• 每个可放置课程的单元格都带有 data-slot="true" 标记

# 2. 可编辑设计

• 表格标题（caption）、表头、时间段和单元格内容均使用 contenteditable="true"

• 用户可以：

  • 修改课程表标题

  • 修改星期名称

  • 直接点击单元格手动输入课程

无需额外表单即可完成编辑。

# 四、拖拽交互说明

页面通过 HTML5 Drag & Drop API 实现课程拖拽功能，交互逻辑集中绑定在 #main 容器上。

# 1. 拖拽开始

• 当用户开始拖拽课程卡片时：

  • 记录拖拽源元素

  • 设置拖拽效果为 copy

# 2. 拖拽经过与提示

• 在可放置的单元格上方拖动时：

  • 阻止默认行为，允许放置

  • 给单元格添加高亮样式，提示可放置区域

# 3. 放置课程

• 松开鼠标后：

  • 将课程名称写入目标单元格

  • 移除高亮样式

• 不会影响左侧课程列表，实现“复制式”拖拽

# 五、打印支持

页面针对打印场景进行了专门优化：

• 使用 @media print 隐藏：

  • 页面标题

  • 左侧课程列表

  • 操作按钮和提示文字

• 打印时仅保留干净、规范的课程表内容

• 点击“打印”按钮即可直接调用浏览器打印功能

# 六、适用场景

该页面适用于：

• HTML / JavaScript 教学示例

• 学生或教师制作课程表

• 展示 HTML5 拖拽与 contenteditable 的实际用法

• 作为无需后端的小型工具页面

# 七、特点总结

• ✅ 无依赖、纯原生实现

• ✅ 拖拽 + 直接编辑，操作简单

• ✅ 结构清晰，易于扩展

• ✅ 支持打印，实用性强

# 源码

$include(/resource/html/drag-class.html)