Thursday, August 26th, 2010
Note that the feature only currently works in Chrome.
Ryan begins with the following code:
- var file = document.getElementById("dragout");
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:
- <a href="Eadui.ttf" id="dragout" draggable="true" data-downloadurl="
- :http://thecssninja.com/gmail_dragout/Eadui.ttf">Font file</a>
The custom attribute uses three different fields of data separated by colons:
The files mime type, the name you wish it to be saved as (this can be anything) and the url to where the file can be downloaded from.
Nice find Ryan!
Posted by Brad Neuberg at 6:00 am