关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件

系列文章

关于前端上传文件全面基础扫盲贴(零)
关于前端上传文件全面基础扫盲贴(一) ----- XMLHttpRequest
关于前端上传文件全面基础扫盲贴(二) ----- File
关于前端上传文件全面基础扫盲贴(三) ----- FormData
关于前端上传文件全面基础扫盲贴(四) ----- FileReader
关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件
关于前端上传文件全面基础扫盲贴(六) ----- 图片上传,旋转,重绘,预览等实战(附DEMO)

H5拖拽事件(知识点主要来源于HTML 5 拖放)

其实打算出实战代码的，想想好像可以插多一个拖曳扫盲贴，在PC上传文件也经常能用到的，先来看看有关知识点。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先看看兼容性如何

移动端全线飘红我可以理解的，毕竟不是主要应用交互，

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

元素哦

。
里面的事件有

事件	描述
ondragstart	当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter	当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover	拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上（默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式 event.preventDefault() 方法。）
ondrop	被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend	当拖拽完成后触发的事件，此事件作用在被拖曳元素上

方法有

方法	作用
setData	设置被拖元素的数据类型和值
getData	返回在 setData() 方法中设置为相同类型的任何数据

实例：

就讲这么多了，接下来你们可以自己发挥想象做出好多好玩的东西了。