拖拽曾是Windows当中一项非常人性化的操作方式，但在最近几年当中，这种操作方式似乎逐渐变得不再稀奇了。而HTML5对拖拽支持的出现，则让拖拽重新回到了人们的视野当中。

下面我们看看，如何使用这一特性直接通过拖拽来下载文件。

  本文所包含的代码全部来自http://www.thecssninja.com/javascript/gmail-dragout ，如果您对其中的任何技术细节存在疑问，请以原文为准。

HTML

HTML的要求非常简单，只要在标签当中引入data-downloadurl和dragable属性即可。data-downloadurl属性的内容分为三部分，第一部分是要下载的文件MIME类型；第二部分是文件的目标名称；第三部分则是文件的URL。

JavaScript

下面我们就可以用JavaScript来监听拖拽事件了。

1
2
3
4
5
6
7
8
9
10
11
12

var file = document.getElementById("dragout");
file.addEventListener("dragstart",function(evt){
    evt.dataTransfer.setData("DownloadURL",fileDetails);
},false);
var fileDetails;
if(typeof file.dataset === "undefined") {
    // Grab it the old way
    fileDetails = file.getAttribute("data-downloadurl");
} else {
    fileDetails = file.dataset.downloadurl;
}

在上面的代码中，我们还检测了dataset的可用性，如果浏览器不支持该特性，则我们直接抓取属性获取数据。