• 提升品牌形象
  • 最新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.2 dataTransfer对象应用详解

11.2 dataTransfer对象应用详解

在实例11-2中,拖放元素还没有放入目标元素中,而要实现这一功能,需要调用dataTransfer对象。该对象专门用于携带拖放过程中的数据,它拥有许多实用的属性和方法,例如,“dropEffect”与“effectAllowed”属性结合使用,可以自定义在拖放过程中的拖放效果;使用setData()与getData()方法可以将拖放元素的数据放置于目标元素中。dataTransfer对象的属性如表11-2所示。

表11-2 dataTransfer对象的属性

dataTransfer对象的方法如表11-3所示。

表11-3 dataTransfer对象的方法

在dataTransfer对象的方法中,都使用了“format”作为形参,表示读取/存入/清空时的数据格式,该参数的格式包含如下几种:

text/plain(文本文字格式)

text/html(HTML页面代码格式)

text/xml(XML字符格式)

text/url-list(URL格式列表)

11.2.1 使用setData与getData方法存入与读取拖放数据

在HTML5中,可以通过访问dataTransfer对象携带拖放元素的数据,携带的过程就是在拖放元素时,调用setData()方法将数据存入dataTransfer对象中;在放入目标元素时调用getDataO方法读取存人的数据。当然,存人与读取时,指定的数据格式都是相同的。

下面通过实例11-3介绍使用setDataO与getData()方法存入与读取拖放数据的过程。

11.2.2 使用setDraglmage方法设置拖放图标

在HTML5中,一个元素在被拖放时,还可以改变鼠标的图标,即可以自定义拖放元素时的鼠标图标。要实现这一功能,需要调用dataTransfer对象的setDragImage()方法,调用格式为:

setDraglmage(Elementimg,longx,longy)

其中,参数img是一个元素,表示拖放时显示的<img>元素图标,x表示图标距离鼠标指针的x轴方向偏移值,y表示图标距离鼠标指针的y轴方向偏移值。

下面通过实例11-4介绍使用setDraglmageO方法设置拖放图标的过程。

11.2.3 使用effectAllowed与dropEffect属性设置拖放效果

结合“effectAllowed”与“dropEffect”这两个属性,可以自定义拖放过程中的效果。两个属性虽然都是为了实现同一功能,但绑定的元素不同:“effectAllowed”属性用于dragstart事件中,绑定被拖放元素;而dropEffect()属性用于绑定目标元素。注意,.“dropEffect”属性中指定的效果,必须在“effectAllowed”属性中存在,否则,也不能实现自定义的拖放效果。

下面通过实例11-5介绍使用“effectAllowed”与“dropEffect”属性设置拖放效果的过程。

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


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

  • QQ在线客服

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

    4000-555-94113099998627
  • 联系地址

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