H5和CSS3的新增--1 22

新的选择器

querySelector

querySelectorAll

设置元素可以拖放

draggable属性，设置为true，元素就可以进行拖放了

注：火狐浏览器不支持

拖拽元素事件

ondragstart：拖拽前触发

ondrag：拖拽中连续触发

ondragend：拖拽结束触发

目标元素事件

ondragenter：移入目标元素时触发

ondragover：移入目标元素后连续触发

ondragleave：离开目标元素时触发

ondrop：在目标元素中释放鼠标触发

事件的执行顺序

1.drop不触发的时候

dragstart>drag>dragenter>dragover>dragleave>dragend

2.drop触发的时候（dragover事件里阻止默认事件）

dragstart>drag>dragenter>dragover>drop>dragend

解决火狐下的拖拽问题

必须设置dataTransfer对象才可以拖拽除了图片外的其他标签

setData()：设置数据key value

getData()：获取数据，根据key的值，获取对应的value

dataTransfer对象下的方法

1.effectAllowed：设置光标样式

2.setDragImage：设置拖拽样式：三个参数：指定坐标，坐标x，坐标y

3.files：获取外部拖拽文件，返回一个filesList列表，filesList下有个type属性，返回文件类型

FileReader对象

readAsDataURL：参数为要读取的文件对象，将文件读取为DataUrl

onload：当文件读取成功完成的时候触发此事件this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据

今天只是一小部分，明天会继续添加更多有关知识