html5 拖放事件

l拖放事件

     •draggable ：

     –设置为true，元素就可以拖拽了（拖拽的是他的副本）

•拖拽元素事件 :  事件对象为被拖拽元素

      –dragstart ,  拖拽前触发 (按下鼠标不算，拖才算)

      –drag ,拖拽前、拖拽结束之间，连续触发           区别：move

      –dragend  , 拖拽结束触发

•目标元素事件 :  事件对象为目标元素

       –dragenter ,  进入目标元素触发，相当于mouseover

      –dragover  ,进入目标、离开目标之间，连续触发

      –dragleave ,  离开目标元素触发，相当于mouseout

      –drop  ,  在目标元素上释放鼠标触发

l拖放事件_2

    •事件的执行顺序 ：drop不触发的时候

    –dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend

    •事件的执行顺序 ：drop触发的时候(dragover的时候阻止默认事件)

    –dragstart  >  drag >  dragenter >  dragover >  drop > dragend

    •不能释放的光标和能释放的光标不一样

l拖放事件_3

•解决火狐下的问题

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

ldataTransfer对象

    •setData() : 设置数据 key和value(必须是字符串)

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

 

ldataTransfer对象_2

•effectAllowed

    –effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)

•setDragImage

    –三个参数：指定的元素（要拖拽的元素），坐标X，坐标Y

•files

    –获取外部拖拽的文件，返回一个filesList列表

    –filesList下有个type属性，返回文件的类型

拖拽任务：

拖拽外部文件：

lFileReader(读取文件信息)

•readAsDataURL

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

•onload

    –当读取文件成功完成的时候触发此事件

    –this. result , 来获取读取的文件数据，如果是图片，将返回base64格式的图片数据

•实例

    –拖拽删除列表

    –拖拽购物车

    –上传图片预览功能