dataTransfer详解
来源:互联网 发布:龙卷风软件下载 编辑:程序博客网 时间:2024/05/01 13:16
描述:
提供对于预定义的剪贴板格式的访问,以便在拖拽中使用
属性描述参数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 thedropEffect 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>
例子:
<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时,效果如下:
0 0
- dataTransfer详解
- dataTransfer 对象
- DataTransfer对象
- drag,drop,datatransfer小结
- 2.5.3DataTransfer对象
- JavaScript中的dataTransfer对象
- html5指南--4.使用DataTransfer
- DataTransfer对象的一些总结
- draggable属性和dataTransfer对象
- event对象的dataTransfer对象
- 【js练习】draggable属性和dataTransfer对象
- html5 mouseEvent DataTransfer 的setDragImage属性
- HTML5元素之间的拖动-----dataTransfer学习
- 拖放操作之——dataTransfer对象
- HTML5里拖放和dataTransfer的坑
- HTML5拖放行为——DataTransfer对象
- 关于java.awt.datatransfer包的一些讲解
- 关于java.awt.datatransfer.Clipboard的复制图片等等
- 访问特别网站
- Discuz!X3.1笔记之一:A1型Discuz!主机和域名绑定的一些问题
- 获得视窗边框宽度
- JAVA中 == 和equals的區別
- chm文件突然乱码了
- dataTransfer详解
- UVA 111
- 如何使用arm-linux-androideabi-addr2line
- JAVA设计模式---adapter(适配器模式)
- 一个捕获linux ctrl+c的小程序
- Myeclipse6.5 注册
- 使用 Open XML 操作文档模板自动生成报表
- nginx配置http为1.0到1.1,主要是为了长连接有效
- enum和宏定义的区别以及其使用