原文:http://www.thecssninja.com/javascript/gmail-dragout
直接看在线演示吧:
新窗口打开演示
拖动那几个文件到你的桌面,看会不会自动保存好?
和Gmail的拖动附件差不多效果的吧。
关键代码:
<a href='/wp-content/uploads/2010/09/a.pdf' id="dragout" draggable="true" data-downloadurl="application/pdf:masalife.pdf:http://www.masalife.com/wp-content/uploads/2010/09/a.pdf">[PDF file]</a> <script> var file = document.getElementById("dragout"); fileDetails = file.getAttribute("data-downloadurl"); file.addEventListener("dragstart",function(evt){ evt.dataTransfer.setData("DownloadURL",fileDetails); },false); </script>
原理:
dragout是页面上的一个<a>元素, draggable=”true”。
然后监听它的dragstart事件。
在此事件中,传递该文件的下载信息给DownloadURL,
也就是<a>的 data-downloadurl属性。
它分为三个部分;
mime type
保存之后的文件名(支持中文)
文件下载地址
。
值得一提的是,文件下载地址URL必须和页面的URL在同一个域里面。