HTML5拖拽

@(HTML5)[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 获取读取的文件数据

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券