dataTransfer 对象

提供了对于预定义的剪贴板格式的访问，以便在拖曳操作中使用。

DHTML元素属性列表

属性 描述
dropEffect 设置或获取拖曳操作的类型和要显示的光标类型。
effectAllowed 设置或获取数据传送操作可应用于该对象的源元素。
方法 描述
clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式。
getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获取指定格式的数据。
setData 以指定格式给 dataTransfer 或 clipboardData 对象赋予数据。

注释

dataTransfer 对象使得自定义处理拖曳操作成为可能。你可通过 event 对象完成这种功能。

dataTransfer 对象可于源对象和目标对象中使用。典型用法是，setdata 方法用于源事件，以便提供关于将要进行传送的数据的数据。相应的，getData 方法用于目标事件以便确保获取的数据和数据格式。

此对象在 Microsoft® Internet Explorer 5 的脚本中可用。

DHTML代码举例

下面的例子使用了 dataTransfer 对象的 setdata 和 getData 方法通过快捷菜单执行拖曳操作。

<HEAD>

<SCRIPT>

var sAnchorURL;

function InitiateDrag()

/*  setData 参数告诉源对象将数据传送为 URL 并提供

路径。*/

{

event.dataTransfer.setData("URL", oSource.href);

}

function FinishDrag()

/*  传递给 getData 的参数告诉目标对象所期望的数据

格式。*/

{

sAnchorURL = event.dataTransfer.getData("URL");

oTarget.innerText = sAnchorURL;

}

</SCRIPT>

</HEAD>

<BODY>

<A ID=oSource href="about:example_complete" onclick="return(false)"

ondragstart="InitiateDrag()">测试锚</A>

<SPAN ID=oTarget ondragenter="FinishDrag()">将链接拖曳到这里</SPAN>

</BODY>

dataTransfer 对象的更多相关文章

  1. HTML5 拖放（Drag 和 Drop）功能开发——浅谈dataTransfer对象

    [前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...

  2. DataTransfer对象的一些总结

    所有元素都支持防止目标事件,但是这些元素默认是不允许释放的,如果拖动元素经过不允许放置的元素无论用户如何操作,都不会触发drop事件,不过可以把任何元素变成有效的放置目标.方法是重写dropenter ...

  3. dataTransfer对象

    HTML5拖拽的数据传输 虽然通过dragstart.drag和dragend事件实现了原生拖拽.但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换.为了实现数据的交换,I ...

  4. JS中dataTransfer对象在拖曳操作中的妙用。

    转载  原文  https://my.oschina.net/jiangli0502/blog/179197 dataTransfer对象提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. 通 ...

  5. HTML5拖拽功能中 dataTransfer对象详解

    有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...

  6. HTML5原生拖拽事件的值传递(三dataTransfer对象)

    引用一篇博客,讲解的比较详细:http://www.tuicool.com/articles/j6Zbam

  7. 拖动对象ondrag

    说明: 在进行拖放操作时,dataTransfer 对象用来保存被拖动的数据.它可以保存一项或多项数据.一种或者多种数据类型.dataTransfer对象有两个主要的方法:getData()方法和se ...

  8. DataTransfer(setData()方法)

    DataTransfer对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的DataTransfer属性.---把拖动的数据存入其中setData有两个参数:1.第一个参数为携带数据的数据 ...

  9. HTML5 FileReader读取Blob对象API详解

    使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用 ...

随机推荐

  1. Strusts2笔记6--拦截器

    拦截器: Struts2的大多数核心功能都是通过拦截器实现的.拦截器之所以称之为“拦截器”,是因为它可以在执行Action之前或之后拦截下用户请求,执行一些操作,以增强Action方法的功能. Str ...

  2. vi 编辑器使用技巧

    1.由命令"vi --version"所显示的内容知vi的全局配置文件 2.显示行号   ,非编辑模式输入 : set nu 3.显示颜色 1)在文件中找到 "synta ...

  3. imperva命令行查看流量值大小

    watch -d -n 1 /proc/hades/status echo clear > /proc/hades/status     //清除这些记录

  4. 管道和xargs区别

    一直弄不懂,管道不就是把前一个命令的结果作为参数给下一个命令吗,那在 | 后面加不加xargs有什么区别 NewUserFF 写道: 懒蜗牛Gentoo 写道: 管道是实现“将前面的标准输出作为后面的 ...

  5. torchvision简介

    安装pytorch时,torchvision独立于torch.torchvision包由流行的数据集(torchvision.datasets).模型架构(torchvision.models)和用于 ...

  6. hibernate的枚举注解@Enumerated

    @Enumerated(value=EnumType.ORDINAL)采用枚举类型的序号值与数据库进行交互, 此时数据库的数据类型需要是数值类型,例如在实际操作中 CatTest ct = new C ...

  7. No.9 selenium学习之路之CSS定位

    CSS定位方式: 元素中间加“.”表示是class 1.通过ID定位 driver.find_element_by_css_selector("#ID值") 2.通过class定位 ...

  8. C语言基础 - read()函数读取文本字节导致判断失误的问题

    工作了几个月,闲着没事又拿起了经典的C程序设计看了起来,看到字符计数一节时想到用read()去读文本作为字符输入,一切OK,直到行计数时问题出现 了,字符总计数没有问题,可行计算就是进行不了,思考了半 ...

  9. java 内部类的继承

    因为内部类的构造器必须连接到指向其外部类对象的引用. 因为在继承内部类的时候那个指向外部类对象的"秘密的"引用必须被初始化,而在导出类中不再存在可连接的默认对象,要解决这个问题必须 ...

  10. 文件下载功能django+js

    1. 功能叙述 前端web页面通过访问url+id的形式访问url lottery/draw/(?P<pk>(\d+))/download/ 后端代码通过orm查询pk相关数据 过滤出自己 ...