一、拖拽接口
元素拖拽事件：
ondrag ：应用于拖拽元素，整个拖拽过程都会持续调用；ondragstart：应用于拖拽元素，当拖拽开始时调用；ondragleave：应用于拖拽元素，拖拽过程中，当鼠标离开拖拽元素范围时调用；ondragend ：应用于拖拽元素，当拖拽结束时调用。
目标拖拽事件：
ondragenter：应用于目标元素，当拖拽元素进入时调用；ondragover：应用于目标元素，当停留在目标元素上时调用；ondrop：应用于目标元素，当在目标元素上松开鼠标时调用；ondragleave：应用于目标元素，当鼠标离开目标元素时调用。
示例：将一个div中的p标签拖拽到另一个p标签中
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->试着把我拖过去
1、被拖拽的元素必须添加
draggable="true"属性。2、浏览器默认会阻止目标元素的 ondrop 事件：我们必须在目标元素的 ondragover 中阻止浏览器的默认行为（使用事件参数对象的
preventDefault()方法），才能将拖拽的元素放到目标元素中。
遗留问题：如果有多个 div，那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数，也就是只能拖拽指定的元素到指定的元素中，这样代码的可用性就很低了。
分析问题：既然有多个被拖拽元素和多个目标元素存在，这些元素都存在于 document 中的，那么可不可以给 document 添加这些事件呢？
答案是可以的。
试着把我拖过去
试着也把我拖过去
在事件参数对象中有一个 target 属性，其值为被拖拽的元素对象。
问题解决了，但是，又是但是......，但是一般少使用全局变量，全局变量谁都可以修改，容易误操作。
在事件参数对象中有一个 dataTransfer 属性，通过 dataTransfer 来实现数据的存储与获取。
dataTransfer 有两个方法：
setData(format,data);用于存储数据；
getData(format,data); 用于取出数据；（取出数据必须在目标元素的 ondrop 事件中，其他事件中无法取到数据）
format:数据的类型：text/html ，text/uri-list
Data:数据:一般来说是字符串值
<!--在h5中，如果想拖拽元素，就必须为元素添加draggable="true". 图片和超链接默认就可以拖拽-->试着把我拖过去
试着也把我拖过去
二、Web存储
用户在浏览网页的时候，可能需要存储一些数据在本地，之前是采用 Cookie 的方式存储，但是 Cookie 只能存储大小为 4k 以内的数据，再多的数据就存储不了。并且 Cookie 的解析也是很复杂的。
到了h5阶段，又提供了两种方式来存储 web 数据：sessionStorage 和 localStorage。
1、sessionStorage
sessionStorage的使用：将存储数据到本地。存储的容量 5MB 左右。
注意：sessionStorage 的存储特点：
这个数据本质是存储在当前页面的内存中，意味着其它页面和浏览器无法获取数据。
它的生命周期为关闭当前页面时，数据会自动清除。
提供的方法：
setItem(key,value) ：存储数据，以键值对的方式存储，
getItem(key) ：获取数据，通过指定名称的key获取对应的value值，
removeItem(key) ：删除数据，通过指定名称key删除对应的值，
clear() ：清空所有存储的内容。
示例：
html>Title sessionStorage的使用
1、获取数据的时候，如果找不到对应名称的 key，那么获取的值为 null。
2、删除数据的时候，如果 key 值错误，不会报错，但是也不会删除数据。
2、localStorage
localStorage的使用：
存储的内容大概 20MB 大小
不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据；
永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除。如果想清除，必须手动清除
setItem(key,value):存储数据，以键值对的方式存储getItem(key):获取数据，通过指定名称的key获取对应的value值removeItem(key):删除数据，通过指定名称key删除对应的值clear():清空所有存储的内容
示例：
html>Title localStorage的使用：
三、自定义播放器
我们知道不同的浏览器的音频视频的播放器控件显示样式有差异，那么我们怎么做一个在任何浏览器下都有相同样式的播放器呢？
常用方法：
load()加载，play()播放，pause()暂停。
注意：jQuery中没有提供对视频播放控件的方式，所以如果使用jQuery操作元素，必须将其转为原生 js 的方式来调用这些方法。
常用属性：
currentTime：视频播放的当前进度duration：视频的总时长paused：视频播放的状态
常用事件：
oncanplay：事件在用户可以开始播放视频/音频时出触发ontimeupdate：通过该事件报告当前的播放进度onended：播放完时触发
示例代码：
html>Title 自定义视频播放器
<!--总时长--> <!--用于点击选择进度--> <!--已经加载的--> <!--已经播放的时长-->00:00:00 00:00:00
1、视频控制器中的播放暂停按钮和全屏按钮都是来自在线字体图标 font-awesome。
2、进度条一栏实际上有4层，处理可以看到的总时长，缓存时长，播放时长外还有一个最顶层的透明层，用于点击进度条实现跳变功能。
原文出处：https://www.cnblogs.com/lvonve/p/9380850.html
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/2478/viewspace-2805584/ ，如需转载，请注明出处，否则将追究法律责任。
