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

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年内会达到相对普及的程度,如何在未来的市场上体现强大的竞争力,还需拭目以待。

MapReduce谢幕,谁将成为最终的接棒者? 变身音乐控制器!开源JavaScript库NexusUI 从112台服务器到Q2 50亿基础设施开销,谷歌只用了15年 【技术文章】微信公众平台开发教程新手解惑40则 Qualcomm承诺投入1.5亿美元 扶持中国初创企业 物联网多了把“新板凳” 联想推三款智能硬件 .NET技术+25台服务器怎样支撑世界第54大网站 基调网络发布听云平台:“听”懂App性能 《近匠》豌豆荚李大海:用搜索敲开手机娱乐平台之门 微信开发HTML5轻游戏中的几个坑 【微信大会】企业号、支付功能、智能客服与LBS、电商开发解析 【CTO俱乐部走进海尔】活动图文直播进行中 燃料电池商业化,数据中心或将永不断电? 广告教父的哲学:值得F2P游戏借鉴的8条经验 UC李云:基于Chromium的浏览器如何打造更好体验 一周消息树:颠覆互联网思维?年薪50万码农转行卖凉皮 Coconut2D:跨平台2D游戏及应用开发工具 第八届中国大数据技术大会将于12月中旬隆重召开 10个常见的缓存使用误区 用户暴增下的收入降低,AWS面临尴尬 云数据中心选址PK:微软第一,IBM第二,谷歌最少 不应错过2014微信开发者大会的八个理由 为什么软件测试需要变革? 苹果和IBM成最佳搭档 微软谷歌或受威胁 OpenStack社区又添新成员 浪潮推动开放云生态系统构建 重度使用AWS及Hadoop,Pinterest的自服务平台打造历程 《近匠》腾讯信鸽:基于大数据的推送 超低功耗&amp;#039;Whisper&amp;#039;架构发布:IoT、可穿戴连接性IP新标准! R的数据分析制霸以及企业级应用盘点 第二届游戏运营技术论坛来袭!与大牛共论云时代的游戏运营之道 云雀科技:飞行器+地图,展望飞行器的新体验 个人的邮箱大小为什么不变? 如何在视图上添加自定义的背景! SQLServer2000的问题 关于核新安全代理客户端的问题 如何把Memo里的某些内容替换? 大虾,救救我,程序打包! 一个工作者线程怎样向创建它的主线程发送消息?::SendMessag第一个参数怎样写? 关于com中的dc,componet的结构设计???? 如何确定图形中画线问题 在下面的程序里如何避免警告? 小弟有一些关于用ATL开发组件来封装asp网页的问题来请教各位高手!!! 简单 关于Qmail的webmail问题!急!!! 将数据导入到Excel文件中的源程序 快快快,紧急!!!!!!!!! Vb+Sql server OLAP Server 的问题,win98如何支持更新立方体? 能否安装Oracle Application Server 的问题.(欢迎参加) 请问在word2000其中一个文档关闭前后各触发什么事件?其中的参数怎样写? 高手们,能讲一下BCB的事件机制么? 讨厌,我的问题都到什么地方去了嘛~ 请帮我看一下这段代码,错在哪里?真快弄晕我了!!!! 如何抓取VB中FORM最小化事件 怎么样得到cpu的二级缓存信息? 我是新手 吉他和小提琴哪个好? 请教:如何在jsp中使用存储过程 关于串口的问题(好低级我就是不会) 有关mfc的问题 请问题在win2000p下用delphi6连sql server 2000 personal要加什么补丁? 一个奇怪的问题---应用程序为什么还出错? 怎样知道文件被哪个程序在使用? java web start实例代码COPY不了,怎么办? PowerBuilder 7.0的数据军定义在存储过程中 SQL SERVER 2000: [DBNMPNTW]拒绝纺问 从visio上考的公式,贴在word上是红叉,怎么办? 请教!!!!急阿!!关于DataGrid 大家来帮帮忙! Access中有象MS SQL Server中sysobjects一样的系统表吗? 请问delphi 里面那个控件可以控制每一行字符的颜色 有没有中文版的msdn呢 关于类的序列化的问题 怎样使用非标准的WINDOWS的ActiveX控件?非常急的问题!!! 为什么回出现这样的错误? 能否告之广州的房价? 消息处理程序? 请问如何检测一个字符串数字的有效范围?请高手大哥们帮个忙。 各位大侠帮忙! VFP的一个报表问题! sorrow_arrow(最近有点烦,有点烦) 请进来 ! 这里有个网站. 有用过WebSphere和VAJ开发EJB的老大吗?帮我看看这个简单的问题! 如图甲所示,用OA,OB,AB三根轻质绝缘绳悬挂两个质量均为m的小球,两小球带等量同种电荷,三根绳子处于拉伸状态,它们构成一个正三角形,吃装置悬挂在O点,开始时装置自然下垂,现用绝缘体对小 一个梯形,高是10厘米,上底增加6cm,下底增加4cm就变成一个平行四边形,求原来梯形的面积 太阳光能晒化塑料吗我想知道就是那种可乐杯子塑料的,放在太阳下会晒化吗? 一个平行四边形,如果高增加3cm,底不变,则面积增加15平方厘米;如果底增加4cm,高不变,则面积增加12平方厘米求平行四边形原来的面积 不用方程 一梯形,上底是下底的三分之二,把上底延长4cm.就成了一个平行四边形.面积是108平方厘米.、、 多大的电压才可以电解水? 如图,三个小球a、b、c分别用三根绝缘细线悬挂在同一点O,细线的长度关系为oa=ob 有一个梯形,如果上底增加4cm,下底和高不变,这时就变成一个平行四边形,面积增加10平方厘米,如果上底减少3cm,下底和高都不变,这时就变成一个三角形,原梯形的面积是多少平方厘米? 皮鞋太阳晒了后变形怎么办 质量m,带电量+q小球用绝缘细线悬于o点,它在A、B之间来回摆动,OA、OB与竖直方向OC的夹角为a如果一竖直向上,大小为E电场是在小球从A点摆到最低点C时突然加上去的,则当小球运动到B点时线的拉 一个梯形下底为10cm,如果上底延长4cm,它就会成为一个平行四边形 ,这时面积增加了10平方厘米,原梯形面积为( )平方厘米, 骨骼肌的作用 A固定作用 B支点 C杠杆 D动力 已知向量oa=(0,1)ob=(1,3)oc=(m,n)若ab//ac,则实数m=?OC是m,m不好意思阿 电子称6v蓄电池换4v蓄电池可以吗 杠杆的作用和特点 怎样把蓄电池电压4V变成8V 小功率的LED灯通常用什么来维持发光的?电池,电子,还是用充电形式的,是USB那种电脑充电吗? 以时速120公里的速度连续行驶10小时需要最小多少排量的小轿车?以时速120公里的速度连续行驶10小时需要最小多少排量的小轿车才不会把车'累'坏?大概5个人乘坐,中间换人连续开10小时的情况 为什么用直流稳压稳流电源给锂电池充电电压会变化,调到16.8V充电时降到15.4V随着充电的增加,输出在上升 电解水 电解水实验中用多少V的电压220V的电压可不可以 P是平行四边形ABCD内一点,且S△PAB=2,s△PCD=3,则平行四边形ABCD的面积为多少? 电解水对电压电压的最低要求是什么 电压,电流均不同的电池组并联后电压,电流会发生怎样变化? 轿车每小时行驶120千米,卡车速度是轿车的3/4.卡车每小时行驶多少千米? 有一个长方形的长减少4cm,宽增加4cm.或长增加6cm,宽减少2cm,面积都不变,求长和宽 有一个Rt△ABC,BC=2,AC=√3,AB=1,将它放在直角坐标系中,使斜边BC在x轴上,直角顶点A在反比例函数y=√3/x的?有一个Rt△ABC,BC=2,AC=√3,AB=1,将它放在直角坐标系中,使斜边BC在x轴上,直角顶点A在反比例函 已知平行四边形ABCD的面积记为S,三角形PAB与三角形PCD的面积分别记为S1和S2点P在平行四边形ABCD外部,则S1+S2——二分之一S请说明理由 在一张长32cm,宽24cm的长方形纸上能剪出多少个直径4cm的圆?剩下的面积是多少? 有一个RT△ABC,角A=90°,角B=30°,AC=1,将它放在直角坐标系中,使斜边BC在x轴上,直角顶点A在反比例函数y=2x分之根号3 的图像上 ,求点C的坐标 一盏电灯重力为G,悬于天花板上A点,在电线O处系一细线OB,使电线OA偏离竖直方向的夹角b=30度,现保持b角不...一盏电灯重力为G,悬于天花板上A点,在电线O处系一细线OB,使电线OA偏离竖直方向的夹 如图,OA的方向是北偏东15°,OB的方向是北偏西40°. (1)若∠AOC=∠AOB,则OC的方向是_______________; 如图,OA的方向是北偏东15°,OB的方向是北偏西40°. (1)若∠AOC=∠AOB,则OC的方向是_______________; 一长10Cm的长方形,若长增加4cm,则面积增加24cm,原长方形的周长是多少厘米? RT三角形ABC中,∠A=90°,∠B=60°,AB=1,将它放在直角坐标系中,使斜边BC在X轴上,直角顶点A在反比例函数y=根号3/x的图象,求点C的坐标. 一块平行四边形的地,底长80M,在平面图上画4cm.要用3cm表示它的高,求这块地的实际面积. 一个长方形的长增加4cm,宽减少1cm,面积保持不变:这个长方形的长减少2cm,宽增加1cm ,面积仍保持不变,求这个长方形的面积. Rt△ABC中,∠C=90°,AB=5,BC=4,将它放在直角坐标系中,使斜边AB边在轴上,直角顶点C在函数y=12/x (x>0) 的图像上(1)当Rt三角形ABC按如图那样放置时,求点A的坐标(2)改变Rt三角形ABC的放置方式, 21.如图,OA的方向是北偏东15度,OB的方向是北偏西40度.(1)若角AOC=角AOB,则OC的方向是()(2)若OD是OB的反向延长线,则OD的方向是()(3)在(2)的条件下,角BOD可看作OB绕点O按逆时针方向转 一个长方形的长增加4cm,宽减少1cm,面积不变,长减少2cm,宽增加1cm,面积仍不变,求长方形的的面积. 初三物理题(计算题以及实验题)计算题:小红来带某工艺品商店买了一件用金铜合金制成的实心工艺品,商店售货员告诉她:这件工艺品是由质量相等的金、铜两种金属混合制成的,含金量为50% 一个平行四边形,如果底增加3cm,高不变,面积增加12cm mp3电池电压为什么4v 如图,等腰Rt△ABC的斜边BC在x轴上,顶点A在反比例函数y=3/x(x>0)的图像上连接OA,则OC²-OA²=() 如图,射线OA是北偏东35°方向,射线OB是北偏西65°方向,则∠AOC=?∠AOB=? 请问7号电池那么大形状的电池,是否有7.4V电压的? 如图,Rt△ABC的顶点B在反比例函数y= 12 x 的图象上,AC边在x轴上,已知∠ACB=90°(2013•南平)如图,Rt△ABC的顶点B在反比例函数y=12/x 的图象上,AC边在x轴上,已知∠ACB=90°,∠A=30°,BC=4,则图中阴影 如图 所示,用输出电压为1.4V,输出电流为100mA的充电器对内阻为2Ω的镍氢电池充电.下列说法正确的是(   )A.电能转化为化学能的功率为0.12W B.充电器消耗的电功率为0.12WC.充电时,电池消 快易充电池电压2. 如图,Rt△ABC的两个顶点在反比例函数y=k1/x上,点B在反比例函数y=k2/x上,AB平行于x轴,BC=2,A(1,3)(1)求点C的坐标(2)求点B所在的函数图像解析式 如图,OA的方向是北偏东15°,OB的方向是北偏西40度. 1若∠AOC=∠AOB,则OC的方向是2OD是OB的反向延长线,OD的方向是?3若OE是平角∠BOD的平分线,用方位角表示OE的方向.4在123的条件下,求∠COE 2.1V的电压能对2.4V的电池充电吗? 做俯卧撑时,中心在A点,重力为600N,手到A的距离为0.6m,脚到A的距离为0.9m,则双手对地面的压力至少为多少? 如图,重力不记的杠杆OAB,可绕O点在竖直平面内转动.重力为100N的物体挂在OA的中点处.已知OA=40cm,AB=30cm,OA⊥AB,杠杆与转动轴间的摩擦忽略不记.要使杠杆平衡,且OA段处於水平位置,那麼作用於B端 如图所示,物体m重为30N,用oc绳提起,OC能承受的最大拉力为20根号 3 N.现用一水平力作用于C点,使OC偏如图所示,物体m重为30N,用oc绳提起, OC能承受的最大拉力为20根号 3 N.现用一水平力作用于C点 如何通过电池电压 毫安选择充电器电压 电流?比如说我有一个3.7V 400mah的可充锂电池 请问我该如何计算充电器的电压和电流呢? “紧旋自行车的各种紧固螺丝,这是通过增大压力来增大摩擦”这句话没什么不对?什么是“紧固螺丝”这句话不对。我想知道为什么? 物重30N用OC绳悬挂在O点,OC绳能承受的最大拉力为20√3N再用一绳系住OC绳的A点BA绳能承受的最大拉力为30N现用水平拉力拉BA,可以把OA绳拉到与竖直方向成多大角度? 在电池充电时直接测电池两端的电压是充电器的输出电压还是电池当前的电压? 质量为m、带电量为+q的小球用一绝缘细线悬于O点,开始时它在AB之间来回摆动,OA、OB与竖直方向OC的夹角均为 .如果当它摆动到B点时突然施加一竖直向上的、大小为E=mg/q的匀强电场.则此时线中 电解水电压多少伏合适?我用两个九伏特干电池串联. 太阳能可以用来晒衣服吗?太阳能在生活中有对我们有什么帮助
备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘