Drag and Drop download

Experimenting drag and drop download on anchor and non-anchor elements.

by davidtong

HTML

<span id="spanDragger" data-downloadurl="images/png:Goog.png:https://www.google.com/images/srpr/logo3w.png" draggable="true">download now</span>

<br>

<a id="anchorDragger" href="#" data-downloadurl="images/png:Goog.png:https://www.google.com/images/srpr/logo3w.png">download now</a>

CSS

[draggable=true] {
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}
#spanDragger {
    color: red; background-color: black; border: 3px solid blue;
}

JavaScript

var file = document.getElementById("spanDragger");
var file2 = document.getElementById("anchorDragger");

var fileDetails = file.dataset.downloadurl;
var fileDetails2 = file2.dataset.downloadurl;

file.addEventListener("dragstart",function(e){
    e.dataTransfer.setData("DownloadURL",fileDetails);
}, false);


file2.addEventListener("dragstart",function(e){
    e.dataTransfer.setData("DownloadURL",fileDetails2);
}, false);