十3、HTML 5 拖拽

@(HTML5)[HTML 5拖拽]

[TOC]

十3、HTML 5 拖拽

HTML 5 拖拽事件

图片自带拖拽功能 其余元素可设置draggable属性：draggable ：true 拖拽元素(被拖拽的元素)事件 :

• ondragstart : 拖拽的一瞬间触发
• ondrag : 拖拽前、拖拽结束之间，连续触发
• ondragend : 拖拽结束触发

目标元素(拖拽元素被拖到的地方)事件 :

• ondragenter : 进入目标元素触发
• ondragover : 进入目标、离开目标之间，连续触发
• ondragleave : 离开目标元素触发
• ondrop :在目标元素上释放鼠标触发 默认状态下，一个元素不能放另外一元素的上面，须要在ondragover事件里面阻止默认事件 IE没效果

生命周期： dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend

火狐下的兼容

火狐浏览器下需设置dataTransfer对象才能够拖拽除图片外的其余标签

• dataTransfer对象
• setData() : 设置数据 key和value(必须是字符串)
• getData() : 获取数据，根据key值，获取对应的value
• effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
• setDragImage ： 三个参数（指定的元素，坐标X，坐标Y）
• files： 获取外部拖拽的文件，返回一个filesList列表
• filesList下有个type属性，返回文件的类型

FileReader(读取文件信息)

readAsDataURL

• 参数为要读取的文件对象
• onload当读取文件成功完成的时候触发此事件
• this. result 获取读取的文件数据