新的选择器
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格式的图片数据
今天只是一小部分，明天会继续添加更多有关知识
网友评论