html5拖拽2-chrome拖拽下载

接着上一文章，chrome中实现了文件的拖拽下载，和桌面互动的效果非常好。
主要要求是在dataTransfer中设定文件的信息，信息需按以下格式：
```
'MIMETYPE:文件名:文件URL'
```
我们可以这样设置文件元素：
```
<a id="mp3" 
    href="http://e.com/f.mp3" 
    draggable='true' 
    data-downloadurl="audio/mpeg:f.mp3:http://e.com/f.mp3">you can download this mp3 to desktop in chrome by drag
</a>
```
接下来问题是获取自定义属性，即data-*,使用dataset（html5属性）
```
var url=document.getElementById("mp3").dataset.downloadurl;
```

最后就是绑定数据了：

document.getElementById("mp3").ondragstart=function(e){
            e.dataTransfer.setData('DownloadURL',e.target.dataset.downloadurl);
        };

可以拖动下载到桌面了，记得是在chrome中啊。

如有疑问，请文末留言交流或邮件：newbvirgil@gmail.com 本文链接 : https://newbmiao.github.io/2015/02/22/html5-drag-api2-chrome-drag-to-downloa.html

菜鸟Miao