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

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

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

HTML

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

字体下载

JavaScript

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

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的可用性,如果浏览器不支持该特性,则我们直接抓取属性获取数据。

查看demo
下载demo

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

Comments are closed.

Post Navigation