Skip to content

Instantly share code, notes, and snippets.

@fxxkscript
Created November 7, 2012 14:38
Show Gist options
  • Save fxxkscript/4031979 to your computer and use it in GitHub Desktop.
Save fxxkscript/4031979 to your computer and use it in GitHub Desktop.
HTML5 Drag and Drop
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Drag and Drop</title>
<style>
body {
background-color: #515151;
width: 100%;
height: 100%;
}
#holder {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#shell {
border: 10px dashed #ccc;
position: absolute;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
#shell.hover {
border: 10px dashed #333;
}
#tip {
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 30px;
margin-top: -15px;
line-height: 30px;
color: #999;
text-align: center;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div id="shell">
<p id="tip">拖动图片到这里呀亲</p>
</div>
<input id="holder" type="file">
<script>
var shell = document.getElementById('shell'),
tip = document.getElementById('tip'),
holder = document.getElementById('holder'),
shellWidth = window.getComputedStyle(shell, null).getPropertyValue('width'),
shellHeight = window.getComputedStyle(shell, null).getPropertyValue('height');
if (typeof window.FileReader === 'undefined') {
holder.style.display = "block";
shell.style.display = "none";
}
shell.addEventListener('dragover', function (e) {
this.className = 'hover';
e.preventDefault();
}, false);
shell.addEventListener('dragleave', function(e) {
this.className = '';
e.preventDefault();
}, false);
shell.addEventListener('dragend', function (e) {
this.className = '';
e.preventDefault();
}, false);
shell.addEventListener('drop', function (e) {
this.className = '';
e.preventDefault();
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
shell.style.background = 'url(' + event.target.result + ') no-repeat center transparent padding-box';
shell.style.backgroundSize = shellWidth + ' ' + shellHeight;
tip.style.display = 'none';
};
reader.readAsDataURL(file);
}, false);
holder.addEventListener('change', function() {
},false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment