HTML5拖放事件（转载）

拖放事件

 •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格式的图片数据

•实例

–拖拽删除列表

–拖拽购物车

–上传图片预览功能

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35187942/article/details/85544204