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. CCN与CDN区别

    CCN与CDN区别 相同点: 1.针对目前互联网上存在问题,提出解决方案,让数据传输更快更稳定. 2.都均衡网络流量. 区别: 1.CDN是内容分发网络,是基于目前的TCP/IP体系结构的补充方法.C ...

  2. Linux USB驱动学习总结（三）---- USB鼠标的加载、初始化和通信过程

    1.usbmouse的定义:usb鼠标既包含usb设备(usb_device)的属性也包含input输入设备(input_dev)的属性 struct usb_mouse { ];///USB鼠标设备 ...

  3. kernel 3.10内核源码分析--TLB相关--TLB概念、flush、TLB lazy模式 【转】

    转自:http://blog.chinaunix.net/xmlrpc.php?r=blog/article&id=4808877&uid=14528823 一.概念及基本原理 TLB ...

  4. 13-6_mysql索引_1_Mysql_Learning_Notes_20180719_13-6

    mysql索引_1_Mysql_Learning_Notes 二分查找/折半查找法,binary search 一种在有序数组中查找某一特定元素的搜索算法; 二分查找法的优点是比较少次数,查找速度快, ...

  5. 21 JSON and Go go语言和json

    JSON and Go 25 January 2011 Introduction JSON (JavaScript Object Notation) is a simple data intercha ...

  6. JSP和Servlet那些事儿系列--HTTPS

    原文:http://qingkangxu.iteye.com/blog/1614053 <JSP和Servlet那些事儿 >系列文章旨在阐述Servlet(Struts和Spring的MV ...

  7. CRM (知识点)

    插件 Django内置Admin Django Admin流程 ModelForm 自定义分页 curd 插件 权限 业务

  8. webpack性能优化-实战

    题外话:年初项目重构上线,项目技术栈使用vue+webpack,测试执行整个打包流程需要10分钟,同时又因涉及三个渠道,部署好环境就需半个小时,这严重延误了上线进度,因此提高webpack构建效率,成 ...

  9. GreenPlum学习笔记：create or replace function创建函数

    原始表数据如下: 需求:现要求按分号“;”将rate_item列进行分割后插入到新的数据表中. CREATE OR REPLACE FUNCTION fun_gp_test_xxx_20181026( ...

  10. MySQL学习笔记：delete from与truncate table的区别

    在Mysql数据库的使用过程中,删除表数据可以通过以下2种方式: delete from table_name truncate table table_name (1)delete from语句可以 ...