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. 【leetcode 简单】 第九十八题 第三大的数

    给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示例 2 ...

  2. python概念-Socket到底有多骚

    Socket究竟是什么呢? 简单来说Socket就是用来完成客户端与服务器之间的通信 例如浏览器访问网页,例如网络游戏等一切基于客户端服务器来实现的C/S架构程序 Socket是基于互联网OSI七层协 ...

  3. dockerfile创建镜像及容器

    第一步: 从王总git上:http://git.oursdata.com/wangyue/dockerfiles.git 进入下图的文件夹中 然后执行以下的说明执行步骤   第二步: 开发环境dock ...

  4. getattr的使用

    from requests_html import HTMLSession class UrlGenerator(object): def __init__(self, root_url): self ...

  5. 二叉树前中后/层次遍历的递归与非递归形式（c++）

    /* 二叉树前中后/层次遍历的递归与非递归形式 */ //*************** void preOrder1(BinaryTreeNode* pRoot) { if(pRoot==NULL) ...

  6. Angular CLI 命令行工具

    工欲善其事必先利其器.好的工具让开发更加简单便捷. 1.全局安装angular cli npm install -g @angular/cli 2.安装完成后就可以使用angular-cli命令行工具 ...

  7. Ubuntu下软件安装方式、PATH配置、查找安装位置

    Ubuntu 18.04, 安装方式 目前孤知道的Ubuntu下安装软件方式有3种(命令): 1.make 2.apt/apt-get 3.dpkg 方式1基于软件源码安装,需要经历配置(可选).编译 ...

  8. python网络编程--RabbitMQ

    一:RabbitMQ介绍 RabbitMQ是AMPQ(高级消息协议队列)的标准实现.也就是说是一种消息队列. 二:RabbitMQ和线程进程queue区别 线程queue:不能跨进程,只能用于多个线程 ...

  9. 程序设计分层思想和DAO设计模式的开发

    无论是一个应用程序项目还是一个Web项目,我们都可以按照分层思想进行程序设计.对于分层,当下最流行划分方式是:表现层+控制层+业务层+数据层.其中,业务层和数据层被统称为后台业务层,而表现层和控制层属 ...

  10. opencv(3)视频操作

    视频中最常用的就是从视频设备采集图片或者视频,或者读取视频文件并从中采样.所以比较重要的也是两个模块,一个是VideoCapture,用于获取相机设备并捕获图像和视频,或是从文件中捕获.还有一个Vid ...