最近频频看到一些网站,开始支持拖曳的功能。就是可以直接将本地电脑里面的文件拖曳到网页中,然后直接上传。这功能确实给我们的文件上传带来了极大的方便。那么网页中这个功能是怎么做到的呢?这个就是HTML5的魅力,它属于HTML5标准的一项新功能。
随着HTML5新功能不断登场,越来越多开发者、设计师也跃跃欲试。如果您也想体验这个功能可以打开下面提及的网址测试一下。目前国内著名的邮件服务提供商163已经在其邮件平台增加了这项功能,可以轻松的拖曳需要上传附件。
不过在体验这项功能之前,需要你的浏览器支持HTML5。根据最近公布的
11月份浏览器市场份额的数据看来,国内还有很多用户在使用IE6,这部分用户自然是无法体验到这项功能了。您可以将
浏览器升级到
IE9,或者使用
FireFox、
Chrome、
Opera等浏览器。
这是 Mozilla Hacks 制作的范例(针对FireFox 3.6)
http://demos.hacks.mozilla.org/openweb/DnD/
这个网页可以读取影片、文字档桉、图片档桉等等,并且显示出来。打开该网页以后,将内容拖曳到以下这个区域内即可读取出来。

这个功能是如何实现的呢?
因为并没有深入研究,因此仅只能将理解的原理告诉大家哈!经过观看范例后,大致上了解到下列几点。
使用JavaScript辅助,在HTML5新增的addEvent方法协助DOM操作。简单来说,在HTML5的JavaScript又多了许多新功能。我想最备受瞩目之一的就是WebSocket了!
而addEvent()这个方法可以监听一些事件。其中drop相关事件也可以监听。只要用 JavaScript 捕捉要被“拖曳文件放入的区域”,接着用addEvent新增事件监听。
现在将文件拖曳到这个区块,就能触发事件了。其后的处理就真的不清楚了!当然这个也不是我们要说的重点,有点走题了。
在听到该功能是采用
HTML5技术现实的时候,激动的同时还有点莫名的失落,毕竟还有不肯升级IE的用户和一些旧版
浏览器得照顾。
相信HTML5会推出越来越多的新功能,这些新功能必将滋生越来越多样化的网络应用,使我们获得更快捷、方便的网络体验。如果你也想成为这些新技术的获益者,那么久快升级您的浏览器吧。因为这些功能都需要一个现代浏览器的支持。如果大家都能普及到新版浏览器,必定会有更多开发人员乐意采用这些技术的。我们的网络生活也更美好了。
标签:功能HTML5浏览器相关现代浏览器拖曳