拖放(DnD)是HTML5的众多强大功能之一,Fifox.5,Safari,Chrome和IE都支持它。谷歌最近推出了一项新功能,允许谷歌浏览器用户将文件从浏览器拖放到桌面。这是一个非常方便的功能,但直到RyanSeddon发布了一篇关于发现他对这个新功能的逆向工程
在Box.net,我们对这些新功能如何使我们能够改进云内容管理解决方案以及为开发人员社区做出更多贡献感到非常兴奋。我很高兴地宣布,DnD下载已集成到我们的产品中。现在,Box用户可以将文件直接从Chrome浏览器拖到桌面上,以下载和保存文件。
我想分享一下我在这个新功能的开发过程中是如何经历几次迭代的。
检查拖放API支持
首先要做的是检查您的浏览器是否完全支持HTML5拖放。一个简单的方法是使用一个名为Modernizr的库来检查某个功能:
if(Modernizr.draganddrop){//BrowsersupportsnativeHTML5DnD.}else{//Fallbacktoalibrarysolution.}
迭代1
我首先尝试了Seddon在Gmail中找到的方法。我添加了一个名为“data-downloadurl”的新属性来锚定文件链接。此过程使用HTML5的自定义数据属性。在数据下载网址中,您需要包括文件的MIME类型、目标文件名(下载文件的所需文件名)和文件的下载URL。因此,这被添加到HTML模板中:
ahf="#"class="dnd"data-downloadurl="{item.mime}:{item.filename}:{item.url}"/a
这将创建如下所示的输出:
ahf="#"class="dnd"data-downloadurl="image/jpeg:Penguins.jpg: