e.dataTransfer是什么意思

DataTransfer对象的一些总结

所有元素都支持防止目标事件,但是这些元素默认是不允许释放的,如果拖动元素经过不允许放置的元素无论用户如何操作,都不会触发drop事件,不过可以把任何元素变成有效的放置目标.方法是重写dropenter和droppover的默认行为: <input id="moveSrc" value="我要被移动到红色div中去"></input> <div id="moveTarget" style="width:100

dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题

做拖拽相关效果时,想在ondragover时给被拖拽元素添加一些样式,于是在dragover事件的函数中通过dataTransfer.getData()获取在dragstart中设置的数据,然而发现dataTransfer.getData()所返回的数据为空. 查询资料发现dataTransfer.setData()中所设置的数据是存储在drag data store中,而根据W3C标准,drag data store有三种模式,Read/write mode, Read-only mode跟P

DataTransfer(setData()方法)

DataTransfer对象专门用来存储拖放时要携带的数据,它可以被设置为拖放事件对象的DataTransfer属性.---把拖动的数据存入其中setData有两个参数:1.第一个参数为携带数据的数据种类的字符串,只能填入类似“text/plain”或“textml”的表示 MIME类型的文字2.第二个参数为要携带的数据目标元素使用getData()方法 (1).目标元素接受到被拖放的元素后,执行getData()方法从DataTransfer里获取数据 (2).

HTML5 拖放（Drag 和 Drop）功能开发——浅谈dataTransfer对象

[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象之前的一篇文章中也有提及到dataTransfer对象,那会只是想通过dataTransfer对象来将被拖拽元素的id进行传递,使得目标元素可以通过相应的dataTransfer对象来获取id进行对应操作. 成员表属性描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型. effect

Xamarin Essentials教程数据传输DataTransfer

Xamarin Essentials教程数据传输DataTransfer 通过数据传输功能,应用程序可以将文本或网址发送到其它的应用程序,这样就可以在应用程序之间共享数据,实现常见的分享功能.Xamarin.Essentials组件提供静态类DataTransfer实现该功能.

dataTransfer对象

HTML5拖拽的数据传输虽然通过dragstart.drag和dragend事件实现了原生拖拽.但是这仅仅是拖拽,在IE6和IE7中还是有些拖拽问题,并且也没有实现数据的交换.为了实现数据的交换,IE5引入了dataTransfer对象.dataTransfer对象是事件对象的一个属性,用于从被拖拽元素相放置目标传递字符串格式的数据.因为它是事件对象的属性,所以只能在拖放事件的事件处理程序中访问dataTransfer对象.在事件处理程序中,可以使用这个对象的属性和方法来完善拖放功能. dat

JS中dataTransfer对象在拖曳操作中的妙用。

转载原文 https://my.oschina.net/jiangli0502/blog/179197 dataTransfer对象提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. 通俗的讲就是在拖曳操作的过程中,我们可以用过dataTransfer对象来传输数据,以便在拖曳操作结束的时候对数据进行其他的操作. 对象属性 dropEffect:设置或返回拖放目标上允许发生的拖放行为.如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败.

dataTransfer 对象

dataTransfer 对象提供了对于预定义的剪贴板格式的访问,以便在拖曳操作中使用. DHTML元素属性列表属性描述 dropEffect 设置或获取拖曳操作的类型和要显示的光标类型. effectAllowed 设置或获取数据传送操作可应用于该对象的源元素. 方法描述 clearData 通过 dataTransfer 或 clipboardData 对象从剪贴板删除一种或多种数据格式. getData 通过 dataTransfer 或 clipboardData 对象从剪贴板获

HTML5拖拽功能中 dataTransfer对象详解

有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其这个对象到底包含了哪些玩意. FQ出去问了下谷歌找到了DataTransfer的API,下面就介绍一下: DataTransfer 拖拽数据传递对象,一般使用方式event.dataTransfer. dataTransfer . dropEffect [ = value ] 拖拽效果,可选值:“n

HTML5原生拖拽事件的值传递(三dataTransfer对象)

引用一篇博客,讲解的比较详细:http://www.tuicool.com/articles/j6Zbam

自制文件上传JS控件，支持IE、chrome、firefox etc.

(function() { if (window.FileUpload) { return; } window.FileUpload = function (id, url) { this.id = id; this.autoUpload = true; this.url = url; this.maxSize = null; this.extensions = null; this.dropId = null; }; window.FileUpload.prototype.init = fun

HTML5_06之拖放API、Worker线程、Storage存储

1.拖放API中源对象与目标对象事件间的数据传递: ①创建全局变量--污染全局对象: var 全局变量=null; src.ondragstart=function(){ 全局变量=数据值; } target.ondrop=function(){ console.log(全局变量); } ②使用HTML5中拖放API提供的dataTransfer对象: 源对象事件的dataTransfer与目标对象事件的dataTransfer不是同一个对象,但可相互传递数据: src.o

HTML5移动开发学习笔记之Canvas基础

1.第一个Canvas程序看的是HTML5移动开发即学即用这本书,首先学习Canvas基础,废话不多说,直接看第一个例子. 效果图为: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> canvas { border-width: 5px; border-style: dashed; b

HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

1.标签元素更加语义化 2.内容类型仍然为“text/html” 扩展符仍然为html或者htm. <1>DOCTYPE 声明<!DOCTYPE html>就可以.不需要使用版本声明. <2>制定字符编码<meta charset="UTF-8">,不需要使用HTML4中的<meta http-equiv="Content-type" content="text/html;char

HTML5 之拖放(drag与drop)

拖放(Drag 和 drop)是 HTML5 标准的组成部分. 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. HTML5 拖放实例下面的例子是一个简单的拖放实例: 实例1 <!DOCTYPE HTML> <html> <head> <style type="text/css"> #div1 {width:488px;height:70px;padding:10px;b

深入理解javascript原生拖放

× 目录 [1]拖放源 [2]拖放目标 [3]dataTransfer对象[4]改变光标前面的话拖放(drag-and-drop,DnD)其实是两个动作——拖和放.所以,它涉及到两个元素.一个是被拖的元素,称为拖放源:另一个是要放的目标,称为拖放目标.本文将通过拆分这两个概念来详细介绍原生拖放拖放源什么样的元素才是拖放源呢? HTML5为所有HTML元素规定了一个draggable属性,表示元素是否可以拖动图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默

通过HTML5的Drag and Drop生成拓扑图片Base64信息

HTML5 原生的 Drag and Drop是很不错的功能,网上使用例子较多如 http://html5demos.com/drag ,但这些例子大部分没实际用途,本文将搞个有点使用价值的例子,通过Drag and Drop生成图片的Base64的字符串信息. 使用Base64方式的图片有诸多好处,可将多个图片信息整合到单个js文件避免多次http请求,可以避免WebGL例子跨域访问的安全限制无法本地文件运行等好处,当然弊端也不少例如不能有效利用浏览器图片缓存机制等.使用HT for Web的

dicom网络通讯入门（2）

第二篇,前面都是闲扯其实正文现在才开始,这次是把压箱底的东西都拿出来了. 首先我们今天要干的事是实现一个echo响应测试工具也就是echo 的scu,不是实现打印作业管理么.同学我告诉你还早着呢.本来标题取的就是<dicomviewer 第二弹之实现打印管理>名字多霸气,最后我又改回来了. 首先你得把数据组织方式搞懂那就是pdu 和dimse 元素数据元素.然后基于这之上你得把协商连接这块搞懂 ,协商连接都没通过不用说后面的了.然后你得把实现一个功能比如打印 ,scu跟sc

周末惊魂：因struts2 016 017 019漏洞被入侵，修复。

入侵(暴风雨前的宁静) 下午阳光甚好,想趁着安静的周末静下心来写写代码.刚过一个小时,3点左右,客服MM找我,告知客户都在说平台登录不了(我们有专门的客户qq群).看了下数据库连接数,正常.登录阿里云发现cpu 居高不下.客户还在等着,只好先重启tomcat.重启后平台登陆正常.本以为是用户导数据或者连接池被占用光了(这个以前出现过,也比较坑),重启下就会没事. 15分钟左右,客服MM又找我,说平台打开很慢. 我打开登录页面加载都很慢,这时候还是不知道什么问题,上阿里云看看,一看发现有攻击. 看

包含修改字体，图片上传等功能的文本输入框-Bootstrap

通过jQuery Bootstrap小插件,框任何一个div转换变成一个富文本编辑框,主要特色: 在Mac和window平台下自动针对常用操作绑定热键可以拖拽插入图片,支持图片上传(也可以获取移动设备上的照片) 依赖于浏览器标准,没有标准代码:工具条和键盘均可定制,并且能够执行任何浏览器支持的命令首先看一下效果: 接下来,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

巴特西