Drag and Drop download

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

HTML

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

<br>

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

<br>

<a id="anchorDraggerLive" href="#" data-downloadurl="">async download via anchor</a>

<li id='testItem' class="item item_mouseover_handler file previewable shared dnd" id="c0_f_5000076178" draggable="true">
    <ul class="file_properties item_mouseover_handler">
        <li class="lock_right_icon"><div class="lock sprite_16x16 sprite_16x16_lock"></div></li>
        <li class="concurrent_lock_right_icon"><div class="concurrent_lock sprite_16x16 sprite_16x16_users_pencil"></div></li>
        <li class="locked_key_right_icon"><div class="locked_key sprite_16x16 sprite_16x16_locked_key"></div></li>
        <li class="task_to_complete"><div class="sprite_16x16 sprite_16x16_task_to_complete" data-tooltip="Click to see task(s) assigned to you"></div></li>
        <li><div class="small_icons"><a class="public shared" data-tooltip="Shared File"></a></div></li>
    </ul> 
    <div id='child-div'>oh yea</div>
</li>

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 file3 = document.getElementById("anchorDraggerLive");
var file4 = document.getElementById("testItem");

var child_div = document.getElementById("child-div");

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);

// async not gonna work
file3.addEventListener("dragstart",function(e){
    setTimeout(function(){
e.dataTransfer.setData("DownloadURL","images/png:Goog.png:https://www.google.com/images/srpr/logo3w.png");
    }, 1);
    
}, false);

child_div.addEventListener("click", function(e){
    console.log(2);
    return false;
});

// testItem not gonna work
file4.addEventListener("dragstart",function(e){
    alert(1);
    e.dataTransfer.setData("DownloadURL",fileDetails2);
}, false);