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. CentOS Linux 7 安装教程

    建立新的虚拟机 将CentOS 7 ISO文件插入到CD-Rom 启动虚拟机,F12选择启动方式为CD/DVD 选择Install CentOS Linux 7 加载安装必要文件 选择安装过程所显示的 ...

  2. APScheduler API -- apscheduler.triggers.date

    apscheduler.triggers.date API Trigger alias for add_job(): date class apscheduler.triggers.date.Date ...

  3. 最长上升子序列O(nlogn) 要强的T^T（2358）

    题目来源:http://www.fjutacm.com/Problem.jsp?pid=2358 要强的T^T TimeLimit:1000MS  MemoryLimit:65536K 64-bit ...

  4. 关于maven环境下使用pom.xml引入包名.lastUpdate包的解决办法

    今天在导入POI-OOXML的时候总是缺失xmlbeans包,而且刷新pom文件总是生成一个lastupdate文件,大小为1KB,终于找到解决办法. 1.首先删除想要的jar包所在文件夹内的所有 . ...

  5. linux nginx大量TIME_WAIT的解决办法--转

    netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' TIME_WAIT 8535 CLOSE_WAIT 5 FIN ...

  6. Sort Colors I & II

    Given an array with n objects colored red, white or blue, sort them so that objects of the same colo ...

  7. Tomcat安装与优化

    Tomcat安装与优化 1.安装jdk环境 最新的JDK下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downlo ...

  8. MySQL5.7之多源复制&Nginx中间件（下）【转】

    有生之年系列----MySQL5.7之多源复制&Nginx中间件(下)-wangwenan6-ITPUB博客http://blog.itpub.net/29510932/viewspace-1 ...

  9. grpc 实现微服务生态笔记

    微服务的发展可谓是一波三折,一代一代经历和N多技术成果,grpc只是其中一个,因为其东家是google,明显比较稳定.加上其强大的文档和技术支持和跨平台的支持,在企业级应用上有很大的可信任感,所以也有 ...

  10. 使用Scrapy命令行工具【导出JSON文件】时编码设置

    Windows 10家庭中文版,Python 3.6.4,virtualenv 16.0.0,Scrapy 1.5.0, 使用scrapy命令行工具建立了爬虫项目(startproject),并使用s ...