在HTML5中，拖放是标准的一部分，任何元素都能拖放，拖放（Drag和Drop）是HTML5标准的组成部分，拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

      在HTML5之前，网页当中实现拖拽要借助JS中的（onmousedown onmonousemove）,现在html5内部就支持了拖拽的功能，结合js能够极大的方便。

【 案例展示 】

学习任务

重点、难点

突破方法

1. 拖放元素。

1. 拖放元素。

2. 教学难点：拖放图片。

采用翻转课堂、项目导入的教学模式，采用分组讨论、案例教学、演示动画等教学方法，运用在线教学平台。

知识目标

能力目标

素质目标

1.掌握拖放元素要点。

2.掌握拖放方式方法。

1.能够熟练进行元素的拖放。

1. 养成积极主动学习意识；

2. 养成勤于动手的习惯；

3. 培养团队合作能力。

课程思政——创新教育

【 视频讲解】

知识储备及案例实现

1、拖放元素1

2、拖放元素2

3、拖放元素3

【 资料下载 】

单元设计

拖放元素

课程教案

拖放元素

演示文稿

拖放元素

任务工单

拖放元素

素材下载

拖放图片

素材图片

课内同步项目

黑色商业咨询服务响应式html5网页.rar 

课外扩展项目

黑色时尚摄影图片格子html5相册.rar 

练习题

 1、练习1

疑难问题解答

1、H5逐步实现拖放功能介绍。