• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实战-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实战
11.1 拖放基础

11.1 拖放基础

在第5章中,详细介绍过从其他应用窗口拖动文件到浏览器中来实现文件上传,这种跨平台拖动文件的方式,是HTML5中拖放API的一个重要特征。

在HTML5中,拖放元素变得十分简单,只要为元素添加一个“draggable”属性,并设置该属性的值为“true”即可实现元素的拖放。在拖动元素的过程中,不仅可以触发多个事件,还可以通过dataTransfer对象携带拖动元素的内容,并将其放入目标元素中;同时,当元素被拖动时,还可以控制鼠标的形状与移动时的效果,接下来逐一介绍各元素的拖放功能。

11.1 拖放基础

在HTML4及以前的版本中,如果需要实现一个元素的拖放效果,需要结合该元素的onmousedown、onmousemove、onmouseup等多个事件来共同完成。这种方式代码相对复杂与冗余,而且也仅限于在浏览器内的元素间拖放,不能实现跨应用拖放。

在HTML5中,一旦将某个元素的“draggable”属性值设置为“true”,.该元素就可以实现拖放的效果。并且在拖放过程中,也能触发众多的事件。通过调用这些事件,更加准确、及时地反映元素从拖动到放下这一过程中的各种状态与数据值。

11.1.1 使用JavaScript代码实现拖放

在介绍使用HTML5中的元素实现拖放之前,先来回顾在HTML4及以前的版本中,如何通过JavaScript代码,实现某个元素的拖放。

下面通过实例11-1介绍使用JavaScript代码实现元素拖放的过程。

11.1.2 在HTML5中实现拖放时触发的事件

在HTML5中,拖放元素变得十分简单,只要将元素的“draggable”属性设置为“true”,就可以实现元素的拖放功能。元素在拖放过程中,触发了多个事件,如表11-1所示。

表11-1 元素拖放时触发的相关事件

下面通过实例11-2介绍元素在拖放过程中触发的事件。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101