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 条评论
登录 后参与评论

相关文章

  • css-transform

    上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

    踏浪
  • HTML5语法,标签,属性

    html5相对于以前的html(html4,xhtml等)更加简洁更加的人性化。主要体现在一下几个方面:

    踏浪
  • SVG

    HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。不过canvas更偏重于动画的制作。所...

    踏浪
  • 18个网站优化技巧

    18个网站优化技巧 快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。 ?   ...

    小小科
  • 【每日播报】ONOS问世风波

    ONOS试图打破一家独强的格局 上周,一个新的开源SDN控制器面世。非营利性组织Open Networking Lab为了促进网络创新推出了他们的ONOS控制器...

    SDNLAB
  • python+django的安装

    找来找去,终于找到一种适合自己的web开发了!不过是否真的适合自己,那就不大清楚了!

    py3study
  • Web APIs 和JS基础关联性

    JS基础学习ECMAScript 基础语法为后面作铺垫,web APIs是JS的应用,大量使用JS基础语法做交互效果

    星辰_大海
  • fluid.io.load_inference_model 载入多个模型的时候会报错 -- [paddlepaddle]

    将多个模型部署到同一个服务时,会出现stack错误. 原因是program为全局.

    Gxjun
  • 微服务的10个挑战和解决方案

    我是一名云API开发人员和架构师,目前正致力于为美国的大型零售客户提供基于Google GCP的微服务。

    歪脖贰点零

扫码关注云+社区

领取腾讯云代金券