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