从零开始学 Web之HTML5（四）拖拽接口，Web存储，自定义播放器

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、拖拽接口

元素拖拽事件：

：应用于拖拽元素，整个拖拽过程都会持续调用；

：应用于拖拽元素，当拖拽开始时调用；

：应用于拖拽元素，拖拽过程中，当鼠标离开拖拽元素范围时调用；

：应用于拖拽元素，当拖拽结束时调用。

目标拖拽事件：

：应用于目标元素，当拖拽元素进入时调用；

：应用于目标元素，当停留在目标元素上时调用；

：应用于目标元素，当在目标元素上松开鼠标时调用；

：应用于目标元素，当鼠标离开目标元素时调用。

示例：将一个div中的p标签拖拽到另一个p标签中

1、被拖拽的元素必须添加 属性。

2、浏览器默认会阻止目标元素的 ondrop 事件：我们必须在目标元素的 ondragover 中阻止浏览器的默认行为（使用事件参数对象的 方法），才能将拖拽的元素放到目标元素中。

遗留问题：如果有多个 div，那么每个 div 都必须写 ondragover 和 ondrop 事件触发的处理函数，也就是只能拖拽指定的元素到指定的元素中，这样代码的可用性就很低了。

分析问题：既然有多个被拖拽元素和多个目标元素存在，这些元素都存在于 document 中的，那么可不可以给 document 添加这些事件呢？

答案是可以的。

在事件参数对象中有一个 target 属性，其值为被拖拽的元素对象。

问题解决了，但是，又是但是……，但是一般少使用全局变量，全局变量谁都可以修改，容易误操作。

在事件参数对象中有一个 属性，通过 来实现数据的存储与获取。

dataTransfer 有两个方法：

用于存储数据；

（取出数据必须在目标元素的 ondrop 事件中，其他事件中无法取到数据）

format:数据的类型： ，

Data:数据:一般来说是字符串值

二、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()：清空所有存储的内容。

示例：

1、获取数据的时候，如果找不到对应名称的 key，那么获取的值为 null。

2、删除数据的时候，如果 key 值错误，不会报错，但是也不会删除数据。

2、localStorage

localStorage的使用：

存储的内容大概20MB大小

不同浏览器不能共享数据。但是在同一个浏览器的不同窗口中可以共享数据；

永久生效，它的数据是存储在硬盘上，并不会随着页面或者浏览器的关闭而清除。如果想清除，必须手动清除

:存储数据，以键值对的方式存储

:获取数据，通过指定名称的key获取对应的value值

:删除数据，通过指定名称key删除对应的值

:清空所有存储的内容

示例：

三、自定义播放器

我们知道不同的浏览器的音频视频的播放器控件显示样式有差异，那么我们怎么做一个在任何浏览器下都有相同样式的播放器呢？

常用方法：

加载，

播放，

暂停。

注意：jQuery中没有提供对视频播放控件的方式，所以如果使用jQuery操作元素，必须将其转为原生 js 的方式来调用这些方法。

常用属性：

：视频播放的当前进度

：视频的总时长

：视频播放的状态

常用事件：

：事件在用户可以开始播放视频/音频时出触发

：通过该事件报告当前的播放进度

：播放完时触发

示例代码：

1、视频控制器中的播放暂停按钮和全屏按钮都是来自在线字体图标 font-awesome。

2、进度条一栏实际上有4层，处理可以看到的总时长，缓存时长，播放时长外还有一个最顶层的透明层，用于点击进度条实现跳变功能。

欢迎关注

Web前端之巅

念念不忘，必有回响。