Skip to content

Instantly share code, notes, and snippets.

@Munter

Munter/drop.html

Created June 16, 2016 19:31
Show Gist options
  • Save Munter/53dd67864aad75709c6965ffd6ae8c4f to your computer and use it in GitHub Desktop.
Save Munter/53dd67864aad75709c6965ffd6ae8c4f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
drop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h1 { padding: 50px 200px; border: 3px dotted gray; }
h1.drag { background: #123456; cursor: grabbing;}
</style>
</head>
<body>
<h1 id="drop">DROOOOOOP</h1>
<script>
var target = document.querySelector('#drop');
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function (eventType) {
target.addEventListener(eventType, function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
});
target.addEventListener('drop', function (e) {
console.log('drop', e.dataTransfer.files);
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment