I'm struggling to get ondrop event firing. It doesn't fire even when calling event.preventDefault on dragenter and dragover. Actually only onDragEnter it's being fired.
style
.drop_zone {
border: 5px black dashed;
width: 300px;
height: 200px;
}
HTML
<body>
<div class="drop_zone"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)" >
<p>Drag one or more files to this Drop Zone ...</p>
</div>
<script src="./index.js"></script>
</body>
javascript
function onDrop(e){
e.preventDefault();
}
function onDragEnter(e){
e.preventDefault();
}
function onDragOver(e){
e.preventDefault();
}
$(document).ready(function() {
var holder = document.getElementById('holder');
holder.ondragover = function () { this.className = 'hover'; return false; };
holder.ondrop = function (e) {
this.className = 'hidden';
e.preventDefault();
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = function (event) {
document.getElementById('image_droped').className='visible'
$('#image_droped').attr('src', event.target.result);
}
reader.readAsDataURL(file);
};
});.holder_default {
width:500px;
height:150px;
border: 3px dashed #ccc;
}
#holder.hover {
width:400px;
height:150px;
border: 3px dashed #0c0 !important;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}<!DOCTYPE html>
<html>
<head>
<title> HTML 5 </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
</head>
<body>
<form method="post" action="http://example.com/">
<div id="holder" style="" id="holder" class="holder_default">
<img src="" id="image_droped" width="200" style="border: 3px dashed #7A97FC;" class=" hidden"/>
</div>
</form>
</body>
</html>thanks for your help.
Actually the event it is being fired. It's a console bug. I set a debugger and a breakpoint within the onDropHandler method but it didn't hit them. But if I use a console.log as below it show me object.
function onDrop(e){
console.log(e);
console.log(e.dataTransfer.files[0])
e.preventDefault();
}