说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

IE10支持HTML5标准拖放

HTML文档下载 WORD文档下载 PDF文档下载
微软的IE10对HTML5进行了的大量支持,包含2D和3D高效平滑转换,完全支持WebKit语法,还有Web Workers、Web Sockets、Web Fonts、Indexed DB、SVG 滤镜、Flexbox布局等等。本文给大家讲讲HTML5在IE10实现拖放功能。

如今,HTML5可谓如众星捧月一般,受到许多业内巨头的青睐。而且微软的IE10也加入了对HTML5的大量支持,包含2D和3D高效平滑转换,完全支持WebKit语法,还有Web Workers、Web Sockets、Web Fonts、Indexed DB、SVG滤镜、Flexbox布局等等。这里,给大家讲讲HTML5在IE10实现拖放功能,因为这个功能在桌面客户端软件中应用十分普遍。

首先,了解一下HTML5的基本组成元素:

  •  <header>:用于任何网站的头部。
  •  <nav>:常用的导航菜单
  •  <section>:定义文档中的节或区段。
  •  <article>:定义独立内容。
  •  <footer>:定义section或document的页脚。

HTML5标准对拖放做了规定,IE10支持dataTransfer对象和拖放图片、超链接、文本的事件,现在增加了draggable属性,支持把一个或多个文件从桌面拖放到网页上的功能。基本状态如下:

draggable = 'true';该元素可拖放。

draggable = 'false';该元素不可拖放。

draggable = 'auto';该元素遵循默认的浏览器行为(文本、超链接和图片可拖放,其他元素不能)。

实现图片的拖放效果

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta charset="gb2312">  
  4. <title>拖放</title>  
  5. <script type="text/javascript">  
  6. function init(){   
  7.   var source = document.getElementById("dragMe");   
  8.   var dest = document.getElementById("text");   
  9.   source.addEventListener("dragstart"function(ev) {   
  10.     var dt = ev.dataTransfer; //把拖放的数据存到dataTransfer对象中   
  11.     dt.effectAllowed = 'all';   
  12.     dt.setData("text/plain""Hello");//this.id = "Hello"  
  13.   },false);  
  14.   //拖放结束   
  15.   dest.addEventListener("dragend"function(ev) {   
  16.     ev.preventDefault();},false);   
  17.   dest.addEventListener("drop"function(ev) {   
  18.     var dt = ev.dataTransfer;   
  19.     var text = dt.getData("text/plain");   
  20.     dest.textContent += text;   
  21.     ev.preventDefault(); //不执行默认处理  
  22.     ev.stopPropagation(); //停止事件传播   
  23.    },false);  
  24. }  
  25. document.ondragover = function(e){  
  26.    e.preventDefault();  
  27. };  
  28. false;  
  29. //必须设定整个页面不执行默认处理,否则拖放处理也不能被实现  
  30. document.ondrop = function(e) {  
  31.    e.preventDefault();  
  32. };  
  33. false;  
  34. </script>  
  35. </head>  
  36. <body onload="init()">  
  37. <h1>拖放示例1</h1>  
  38. <!-- draggable属性设为true -->  
  39. <div id="dragMe" draggable="true" style="width: 200px; border: 1px solid gray;"> 拖放试试</div>  
  40. <div id="text" style="width: 200px; height: 200px; border: 1px solid gray;"></div>  
  41. </body> 

当用户拖动一个可拖放的元素时,IE10随着拖动的光标移动显示一个元素的虚影。draggable属性是不可继承的,因此元素的子元素不会自动变成可拖放的。

另外,dataTransfer对象的files属性支持用户把文件从桌面的文件夹中拖放到网页上。如邮件客户端,把附件拖放进邮件内容中,或者在图库页面中添加照片。这种从桌面端到Web端的无缝交互无疑是Web开发的一大亮点。

HTML5现有标准能够被各大浏览器无差别支持,就能看出大家对HTML5的喜爱程度,估计在3年内会达到相对普及的程度,如何在未来的市场上体现强大的竞争力,还需拭目以待。

分割图像的原理 -VB资料 封面的设计 -VB资料 改变 Win95 的 Shell -VB资料 改变墙纸 -VB资料 格式化磁盘 -VB资料 跟我学用ActiveBar-VB资料 VB获得IE的版本号 VB获得Windows启动方式 VB获得打印机驱动程序的设定 VB获得当前计算机上的区域设置 VB获得当前用户名 VB获得分区信息并判断是否有CD VB获得某个文件夹下的所有子目录 VB获得驱动器的卷标 VB获得系统中的所有字体列表 VB获得系统中鼠标的键数 获取驱动器信息-VB资料 文章主题: 获取桌面图象 -VB资料 计算两个日期间的工作日-VB资料 监视外部程序的运行情况-VB资料 检测文件是否存在 -VB资料 检测系统驱动器-VB资料 检查电子邮件地址输入的有效性 -VB资料 检查硬盘空间 -VB资料 将数据转换为内存二进制形式字符串(模拟CV?和MK?$两组函数) -VB资料 禁用 Alt-Tab 或 Ctrl-Alt-Del -VB资料 禁止使用 Alt+F4 关闭窗口-VB资料 绝非玩笑:VB7将完全面向对象 拷贝磁盘 -VB资料 控制Ctrl+Del+Alt键-VB资料 快速编辑VB程序技巧 关于检测组合键的程序怎样写? 菜鸟问题!!!页面显示后台数据 请问软件包LEDA -- library of the data types and algorithms 哪里有下载的? 如何获得当前页面中的所有Textbox控件集合? 如何对两个表操作???谢谢! java的程序在写Dreamweaver 4里写完不可以直接用,是不是 打印的问题 DELPHI5的资源编辑器用起来很不爽,有没有好点的? 帮帮忙~~~~ 请问软件包LEDA 哪里有下载的?谢谢 ado连接远程数据库是以文件共享方式,还是c/s方式啊? 有没有工作的JAVA程序员吗? 简单的语法问题 vb还是不太会用 求教 最菜的问题 如何保存无法保存的网页? 只要每人献出一点爱,人人都能成为程序员 呵呵,又有问题了 苦恼,大家帮忙啊 关于声音处理的一个问题 求英文资料,急!!! 帮忙解释一下程序,谢谢:) 怎样实现这样的存储过程?高手快来! 用过websnap的进来看一下,巨简单! 调试版本与发布版本的区别? 急等答案, sql的基本表是用一个存储文件表示还是用若干个存储文件表示 我的Windows 2000有时无法关机(重起) ********通过编号找名称!*******求最快的方法!!! 格式化硬盘后安装WIN98过程中为什么出现蓝屏,继续安装下去连软件都安装不了? 请教一个让人郁闷的问题! 寻找一本人民邮电出版社出版的有关 GSM 网络优化的书 请问高手:能不能动态creatLayer? select * ????? 问候大家 晚上好 ,有个问题请教,立即给50分! 怎样使模式对话框最大化显示? 关于socket 十万火急,大哥大姐快救小弟一命!!!考高程的或考过的请帮忙,感激!!! 求救 跟帖 在SERVLET中,页面怎么跳转呢?客户端可以下载指定的ftp文件。。? 一个数据库连接问题??? 挂了双硬盘后,我的光驱不见了,请问怎么办?急!!!!!!!!!!!!!!!! 在SERVLET中,页面怎么跳转呢?客户端可以下载指定的ftp文件。。? 急急急急急! 寻求JB8+Weblogic7的配置! ftp 问题 CFormView有什么优势啊? 请问VB.NET中sln文件是做什么用的??? 你知不知ASP。NET可不可以做出JAVA APPLET 这样的效果?或者VB。NET也可以不? 为什么我的word有时竟然占用了100%的cpu? 急求救!jbuilder6+weblogic6下编译出错。 请问数据库的记录有100万条,对要搜索的那个字段做了个Index,这样的情况下,用Select语句Where条件读取数据,需要多长时间。 如何改变将滚动条变为flat样式,如何更改其颜色? 问一道数问题已知代数式x方(a* x的五次方 + b* x的三次方+ cx)/x的四次方+d* x的平方当x=1时,值为1,当x=-1时直是?是-1伐 蚂蚁从10层高的大楼落下为什么安然无恙 母乳吸出来常温可以保存多久 高中政治生活是必修几? 蚂蚁从高处落下为什么不死(简短) 哪里有做蒸馏水的机器卖 熬好的中药可以在常温下放多久不坏?(密封状态) 世界上第一个人生得是谁?是谁生的? 肤色正常的夫妇生了一个白化病孩子,这对夫妇在生一个白化女孩的可能性为 音响led灯我想做一个音响灯,灯是led.问题是用什么电路驱动.要求是这样的,有音频输入,有电源,led会跟着音乐的节奏亮,给个电路图. 条形码 有22个数字的那种是属于哪类条码 一个无白化病男性与一个白化病女性生出健康孩子的概率是多少 怎么在音响上连接灯泡让它随着音乐的旋律闪烁?有源音响,但是我想在音响上接一串灯泡让它跟随音乐的旋律闪烁·请问各位大侠该怎么做啊帮帮忙!能不能请各位说的清楚一点啊! 请问这个是什么类型的条码? 一对夫妇表现型正常,却生了一个患白化病的孩子,在丈夫的一个初级精母细胞中,白化病基因数目和分布情况可能是请说出详细解答1.2个,位于两条染色体上2..2个,位于两条同源染色体上3.2个,位 功放机上像电灯泡一样的东西是什么,干什么用的. 炼铁 碳酸钙炼铁时为什么要加碳酸钙?我知道是要和二氧化硅反应,那又是为什么? 胡无人、汉道昌什么意思? - 宇宙航行:关于地球同步卫星的说明中不明白的地方……由于同步卫星相对于地面静止,故其必须做匀速圆周运动,而做匀速圆周运动的物体的合外力必总是指向圆心……其中‘而做匀速圆周 有哪些病的病原体是细菌?如题,麻烦多举几个典型的例子. 发生火灾时,如果你被困高楼室内无法逃生,如何待救? 日本核危机会污染盐巴吗? 皮肤大面积烧伤的病人,容易被细菌感染,其原因是A非特异性免疫能力降低B由于皮肤真皮内的血管大部分被烧坏,导致酶的活性降低为什么不选B呢? 表现型正常夫妇生有一患病女儿,正常女儿和有一个该致病基因的男子婚配,孩子携带致病基因的概率是多少从表现性正常夫妇生了有病的女儿,一定是常染色体上的隐性遗传,夫妇基因型为Aa、A 如图所示质量为m的木箱放在水平面上木箱中的立杆上套着一个质量为m的小球,开始时小球在杆的顶端,由静止释放后,小球沿杆下滑的加速度为重力加速度的二分之一倍,即a等于二分之一g,则小 卡拉ok音响高音会保护如何加灯泡详细步骤或图解我知道在音响里,我是说在分频器上怎么加 4级英语口语何时可以考 质量为M=50kg的木箱放在水平面上,木箱中的立杆上套着一个质量为m=5kg的小球.开始时小球在杆的底端,以16m/s速度向上滑行,滑行的最大高度为8m,则小球在下滑过程中,木箱对地面的压力为多少?希 LED灯条可以直接接上音响吗家里低音炮 可以把LED灯条直接接在喇叭线借口那里吗 我想让灯光跟着音频亮,我是电子白痴 谁知道怎么搞 柏林电视塔有多高. 哲学有什么分类? 怎样记住有氧无氧呼吸公式 我08年6月过的四级,当时561分,现在都09年6月过了,我还能以去年的成绩去考英语口语证么? 运用政治生活说明如何理解当前国际形势的特点 氯化镁溶液是胶体吗?请回答具体些,马上选出最佳答案 有没有五硫化钠? 五颜六色是什么动物 无氧呼吸的公式是怎样的 求高炉炼铁的方程式如题 掏鸟窝 我要四级燕子蛋,送我 要什么鸟蛋交换随挑要四级燕子蛋,加我好友,或留下开心名我加你开心名:罗文菁有5级燕子蛋,4级喜鹊蛋,4级布谷蛋,4级百灵蛋,4级珍珠鸟蛋,4级乌鸦蛋,4级白鸽蛋, 受平衡力的两个力大小相等吗 一个表现正常其双亲也正常但有一白化病弟弟的女人,与一无亲缘关系的正常男人婚配,已知白化病基因携带者在人数中的概率为1/200.现有一表现型正常的女人,其双亲的变现型均正常,但其弟弟 掏鸟窝中怎么加入鸟友会 两力相同指两力的大小、方向、施力物体、受力物体都相同,实质上指的同一个力 这句为什么错? 某女子正常,父母也正常.其弟白化病.某男正常,其母是白化病.如果此男女婚配,生下白化病女的概率为?要有理由. 掏鸟窝中 什么是处在保护期的鸟蛋?为什么不能掏走? 锚杆长度和数量在设计里有要求吗,计算环向受力怎么样算啊?要重了? 有一对表现型正常的夫妇,男方的父亲是白化病患者,女方的弟弟也是白化病患者,但女方双亲表现正常,这对正常夫妇生出白化病孩子的机率是( )  A.2/3  B.1/2 C.1/4  D.1/6 关于问问分类我很气愤!分类是为了让想得到答案的人能更便于得到答案,而有些人不管什么分类,就选了,有兴趣的朋友可以去诗词歌赋里看看,没有几个是真正讨论诗词歌赋的!请问你们是怎么 长江的起源在那二 什么时候可以查09年的英语口语成绩? 那为朋友能帮我买到是高等教育出版社或者是上海外语教育出版社急用! 英语翻译:1.你有养宠物的打算吗? 商店里面那些水属于蒸馏水? 大学英语教学大纲通用词汇表 哪里有旧书卖? 当大面积的烧伤护理不当时,易发生感染而引起严重的后果,为什么是由于非特异性免疫能力减弱?人体主要不...当大面积的烧伤护理不当时,易发生感染而引起严重的后果,为什么是由于非特异 大峡谷蒸馏水 丽江花园店怎么样 问一道植物分类题下类植物依次按藻类植物,苔藓植物,蕨类植物,裸子植物,被子植物排列的是( )A 海带,葫芦藓,蕨,银杉,珙桐B 水绵,地钱,胎生狗脊,玉兰,水杉, 大面积烧伤病人,如果护理不当,很容易发生感染,其原因是非特异性免疫功能降低还是特异性免疫功能降低? 吸出来的母乳常温保存多久 聚焦全球健康服务业 看产业带来的经济中断30年 美国与新西兰恢复联合军演格鲁吉亚新当选总统:将与俄构筑建设性迈克尔杰克逊私人医生刑满出狱 欲再获英国遭近年最大暴风雨袭击 交通受阻数翘臀又嘟嘴 壮汉翻拍“性感照”遭吐槽婚外情网站进军狮城遇阻西飞成波音737MAX供应商迈克尔杰克逊私人医生刑满出狱 欲再获日报:朝鲜增设14个经济特区 允许土十八届三中全会或定调国企改革:国民共冀宝斋博物馆馆长离世 馆内藏品被指雷“小产权房”暂无新政 三中全会或迎来嘉兴19岁女子未婚先孕 为保胎拿姐姐省人大调研杭州“治堵” 杭州酝酿再度杭州:市区60方以上新建住宅 最少配深圳1所小学被\"过渡安置\"8年 宁波首宗被强制收回宅地出售 成交楼面温州5天发生火灾147起 其中住宅火台湾“立法院”:向当局领导人丢鞋会促美4囚犯上演浴室版“越狱” 2人被捕弘扬“武”文化 海峡两岸中华武术论坛澳盛银行:馊水油风暴使台湾今年GDP香港赛郑洁完败无缘四强 卡-普利斯科法官:证据有细节但无法证实 延长刀锋范金克尔:能同因扎吉交流,他对我期待安帅支持马竞风格,足球不是小女孩的游葡萄牙7月份工业产出同比增长3.6%西非经济共同体拟实施单一提取税率标准习近平在上海合作组织成员国元首理事会葡萄牙二季度GDP同比增长0.9%克里访问土耳其争取其加入打击“伊斯兰弘扬“武”文化 海峡两岸中华武术论坛习近平会见哈萨克斯坦总统纳扎尔巴耶夫范加尔调侃法尔考:一来就能说英语了三千新生军训两百余人病休 请假理由无荆门沙洋强戒所:读书点燃戒毒学员梦想大项目合作为中俄关系注入催化剂缅甸总统吴登盛会见王家瑞鄂暴雨洪涝已致48万人受灾 启动救灾范金克尔:穆帅、托雷斯都力荐我加盟米加西亚:专注于恩波利,而不是冠军联赛
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘