描述:

提供对于预定义的剪贴板格式的访问,以便在拖拽中使用

属性 描述 参数
dropEffect[=sCursorStyle] 设置或获取拖拽操作的类型和要显示的光标类型 可选的
copy 复制样式被显示
link  链接样式被显示
move  移动样式被显示
none  默认,没有鼠标样式被定义
effectAllowed[=sEffect] 设置或获取数据传送操作可应用与该对象的源元素 可选的
copy 选项被复制
link  选项被dataTransfer作为link方式保存
move  当放置时,对象被移动至目标对象
copylink  选项是被复制还是被作为link方式保存关键在于目标对象
linkmove 选项是被作为link方式保存还是被移动关键在于目标对象
all 所有效果都被支持
none 不支持任何效果
uninitialized 默认不能通过这个属性传递任何值

说明:

effectAllowed定义了在源对象上的操作,可定义在ondragstart事件中.

dropEffect定义了在目标对象上的操作,可定义在ondrop,ondragenter,ondragover事件中.

effectAllowed可以定义all操作,但是dropEffect可以定义copy操作.

The target object of a drag-and-drop operation can set the dropEffect during the ondragenter, ondragover, and ondrop events. To display the desired cursor until the final drop, the default action of the ondragenter, ondragover, and ondrop events must be canceled and the dropEffect must be set.

例子:

    <span ondragstart="DragStart()">

        This Is A Test String.

    </span>

    <p> </p>

    <div id="dv" style="border:solid 1px black;height:150px;width:200px" ondrop="Drop()" ondragover="DragOver()"
        ondragenter="DragEnter()">

        [Drop To Here]

    </div>

    <script type="text/javascript">

        function DragStart(){

            event.dataTransfer.effectAllowed="copy";

        }

        function Drop(){

            DragOver();

            event.srcElement.innerText=event.srcElement.innerText+event.dataTransfer.getData("text");

        }

        function DragEnter(){

            DragOver();

            event.dataTransfer.dropEffect="copy";

        }

        function DragOver(){

            event.returnValue=false;

        }

    </script>
方法 描述 参数
setData(sFormat,sData) 将指定格式的数据赋值给dataTransfer或者clipboardData sFormat:URL,Text
getData(sFormat) 从dataTransfer或者clipboardData中获取值 sFormat:URL,Text
clearData([sFormat]) 通过dataTransfer或者clipboardData中删除某种格式的数据 sFormat:Text,URL,File,HTML,Image

例子:

<SCRIPT>

function InitiateDrag(){

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

}

function FinishDrag(){

    document.getElementById("oTarget").innerText = event.dataTransfer.getData("URL");

}

</SCRIPT>

</HEAD>

<BODY>

    <A ID="oSource" href="http://www.sohu.com" ondragstart="InitiateDrag()" onclick="return false;" >Test Anchor</A>

    <SPAN ID="oTarget" ondragenter="FinishDrag()">Drop Here</SPAN>

</BODY>

效果:

选中Test Anchor,然后拖放至Drop Here时,效果如下:

Javascript--dataTransfer的更多相关文章

  1. 你想的到想不到的 javascript 应用小技巧方法

    javascript 在前端应用体验小技巧继续积累. 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElemen ...

  2. javascript小技巧

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  3. Javascript快速入门(下篇)

    Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...

  4. 【温故而知新-Javascript】使用拖放

    HTML5 添加了对拖放(drag and drop)的支持.我们之前只能依靠jQuery 这样的JavaScript库才能处理这种操作.把拖放内置到浏览器的好处是它可以正确的集成到操作系统中,而且正 ...

  5. 使用 JavaScript File API 实现文件上传

    概述 以往对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情.虽然伴随着 Web 2.0 应用技术的不断发展,JavaScript 正在扮演越来越重要的角色,但是出于安全性的考虑,JavaScr ...

  6. javascript小技巧(非常全)

    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcE ...

  7. 读javascript高级程序设计12-HTML5脚本编程

    一.跨文档消息传递(XDM) 1.发送消息 postMessage(msg,domain)用于发送跨文档消息.第一个参数是要传递的消息内容,第二个参数表示接收方来自哪个域.第二个参数有助于提高安全性, ...

  8. JavaScript事件大全3

    //无模式的提示框 //屏蔽按键 <html> <head>    <meta http-equiv="Content-Type" content=& ...

  9. javascript高级编程运用

    一//各种尺寸 (size) s += “\r\n网页可见区域宽:“+ document.body.clientWidth; s += “\r\n网页可见区域高:“+ document.body.cl ...

  10. JavaScript操作DOM的那些坑

    js在操作DOM中存在着许多跨浏览器方面的坑,本文花了我将近一周的时间整理,我将根据实例整理那些大大小小的“坑”. DOM的工作模式是:先加载文档的静态内容.再以动态方式对它们进行刷新,动态刷新不影响 ...

随机推荐

  1. 于SharePoint经营SharePoint Designer建立

    于SharePoint经营SharePoint Designer建立 SharePoint Designer 2010(SPD)它是一种强大的工具,帮助建立一个高速解决方案. 通过连接到现场,能够自由 ...

  2. 关于sql中去换行符的问题

    今天要用bootstrap开发一个网页,要使用到JSON,但是JSON的格式不正确,然后在http://www.bejson.com/[Be JSON]中测试了一下JSON. 发现JSON中多了一个换 ...

  3. Java-如何去掉JFrame上的最大化最小化和关闭按钮（转）

    在JDK1.4以前,我们只有一种方式来去掉窗口的标题栏,那就是直接使用JWindow,用JWindow来代替JFrame使用.但用过JWindow的人一定知道,JWindow在操作系统的任务栏是不可见 ...

  4. ASP.NET MVC：01理解MVC模式

    ASP.NET MVC是ASP.NET Web应用程序框架,以MVC模式为基础. MVC:Model View Controller 模型-视图-控制器Model(模型):负责对数据库的存取View( ...

  5. uva 10635 Prince and Princess（LCS成问题LIS问题O(nlogn)）

    标题效果:有两个长度p+1和q+1该序列.的各种元素的每个序列不是相互同.并1~n^2之间的整数.个序列的第一个元素均为1. 求出A和B的最长公共子序列长度. 分析:本题是LCS问题,可是p*q< ...

  6. SQL Server 2008 R2 性能计数器详细列表（一）

    原文:SQL Server 2008 R2 性能计数器详细列表(一) SQL Server Backup Device 计数器: 可监视用于备份和还原操作的 Microsoft SQL Server ...

  7. 使用Advanced Installer将.exe程序重新封装为.msi程序

    原文:使用Advanced Installer将.exe程序重新封装为.msi程序 使用Advanced Installer将.exe程序重新封装为.msi程序 首先安装Advanced instal ...

  8. python抓取网络内容

    最近想做研究互联网来获取数据,只是有一点python,让我们来看一个比较简单的实现. 例如,我想抓住奥巴马的每周演讲http://www.putclub.com/html/radio/VOA/pres ...

  9. 基于ORACLE建表和循环回路来创建数据库存储过程SQL语句来实现

    一个.概要 在实际的软件开发项目.我们经常会遇到需要创造更多的相同类型的数据库表或存储过程时,.例如.假设按照尾号点表的ID号,然后,你需要创建10用户信息表,的用户信息放在同一个表中. 对于类型同样 ...

  10. 微软发布Win10开发者指南视频

    假设你是一个开发者,推荐你看看微软今天推出了一系列视频,标题是Win10开发人员指南,总体长度6时,多达22章内容,介绍很广泛.其实,即使你是编程新手或仅有兴趣,也值得一看. 开发人员Jerry Ni ...