How to Drag Out Files Like Gmail

作者: nick 分类: js 发布时间: 2010-09-01 13:12 ė 6没有评论

Ryan Seddon, aka the CSS Ninja, has a nice blog post up where he reverse engineers the new feature in Gmail where you can drag attachments from an email on to your desktop.

Note that the feature only currently works in Chrome.

Ryan begins with the following code:

var file = document.getElementById(“dragout”);

file.addEventListener(“dragstart”,function(evt){
evt.dataTransfer.setData(“DownloadURL”,fileDetails);
},false);

Describing the code Ryan says:

From the code above you attach an ondragstart event listener to something you want to “drag out” and save to your file system. On the dragstart event you set the data using the new “DownloadURL” type and pass file information to it.

Note though that in order to pass the correct data to the dragstart event you need to provide a download URL that can be passed to the setData("DownloadURL" call. Ryan uses the HTML5 data-* attribute to pass this custom data in:

HTML:

<a href=”Eadui.ttf” id=”dragout” draggable=”true” data-downloadurl=”
application/octet-stream
:Eadui.ttf
:http://thecssninja.com/gmail_dragout/Eadui.ttf”>Font file</a>

本文出自 传播、沟通、分享,转载时请注明出处及相应链接。

本文永久链接: https://www.nickdd.cn/?p=1007

发表评论

您的电子邮箱地址不会被公开。

Ɣ回顶部