Skip to content

Instantly share code, notes, and snippets.

@leonjza

leonjza/index.html

Created July 23, 2018 21:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save leonjza/6270b25fa9306f7be89891dc8f05d6d3 to your computer and use it in GitHub Desktop.
Save leonjza/6270b25fa9306f7be89891dc8f05d6d3 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Drag 'n drop API test
Raw
index.html
<html>
<head></head>
<body id="drop_zone" ondragenter="dragEnterHandler(event);">
<div>
<p>Drag one or more files to this Drop Zone ...</p>
</div>
</body>
<script>
// https://stackoverflow.com/a/6756680
window.addEventListener("dragover",function(e){
e = e || event;
e.preventDefault();
},false);
window.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
},false);
function dragEnterHandler(ev) {
console.log("Drag enter");
console.log(`${ev.dataTransfer.items.length} item(s)`);
for (let i = 0; i < ev.dataTransfer.items.length; i++) {
if (ev.dataTransfer.items[i].kind === 'file') {
console.warn(`Type: ${ev.dataTransfer.items[i].type}`);
console.log(`File: ${ev.dataTransfer.items[i].file}`);
console.log(`Length: ${ev.dataTransfer.items[i].length}`);
console.log(`Name: ${ev.dataTransfer.items[i].name}`);
}
}
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment