h5文件处理与拖拽
对于文件的处理不外乎就是文件的读取与读取是否完成，以及相关的读取文件的方法等。在h5中相关的事件管理的方法去对文件做出想用的管理。基本的方法如下：
fillReader 用于读取文件
fillReader方法 abort()终止读取 readAsBinaryString(file) 将文件读取为二进制编码
readAsDataURL(file) 将文件读取为DataURL编码 readAsText(file) 将文件读取为文本
readAsArrayBuffer(file) 将文件读取为arraybuffer
fillReader 事件
onloadstart 读取开始时触发 onprogerss 文件在读取中 onloadedend 读取完成触发，无论成功或者时失败
onload 文件读取完成并且成功时触发 onabort 中断时触发 onerror 出错时触发
下面有一个实际的例子用于来实现文件上传，这上传的方式是结合了h5特有的拖拽事件相结合而写的。主要的就是通过拖拽将文件放入到目标框中然后即可完成拖拽。
接下来就是来介绍h5中的拖拽，在之前我们也介绍过拖拽，之前所说的拖拽是通过js来实现的其主要是通过改变dom的位置而实现的。而在h5中的拖拽，当你拖拽此元素时，会有一个相当于分身的物块被你拖拽，在原位置的物体并没有移动，当松开鼠标后这个分身的物体要回到原来的物体上。对于h5的拖拽触发的方式是通过draggble属性，将其的属性值设置为true即可触发。关于拖拽的相关事件如下：
拖拽相关事件
dragstart 被拖拽元素开始时被触发 dragend 被拖拽元素结束时触发即鼠标松开时
dragenter 目标元素(此事件是绑定在目标元素上的) 拖拽元素进入目标元素时被触发
dragover 目标元素 拖拽元素在目标元素上移动时触发 drop 目标元素 被拖拽元素在目标元素上时同时松开鼠标后才会被触发
注意需要阻止默认dargover的默认事件之后才会触发该事件
下面就是去触发这几个方法的实例例子：
在上面事件的触发过程中，只需要注意的就是事件触发时间的先后。以及事件在何种情况下可以被触发。下面介绍的就是用h5的拖拽所写的一个实例，其功能是当你去拖动上面带有数字的物体就可以实现新的顺序，当移动上面带有数字的物体到黑色边框中，这个物体就会被删除具体的效果图如下：
实现这个功能的方式有很多种但是在这里采用的就是h5拖拽的方式来实现的，对于页面结构以及样式上的布局就不多说，在这里主要说的就是整个逻辑的实现过程。
首先就是触发h5的拖拽，使用draggble属性并将其的属性值设置为true.然后就是对于其重新排序的方法的实现过程的代码部分。
在上面的代码中交换位置的实现过程主要是在于去触发drop事件然后去调用insertBefore方法去完成整个的交换。在这里我们还封装了一个getIndex方法，此方法的目的在于获取重新排序之后的li的顺序。接着就是去实现删除的功能代码如下：
采用的方式与上面的实现的过程大同小异，这里通过的是触发dragover事件，然后再使用remove方法去删除掉这个dom元素。
关于文件的处理以及h5的拖拽就说到这里了，只要掌握好上面所说的基础点，对于去实现某些功能就非常的容易。