0
190
Viewsdrop event is not getting triggered
Edit: It works for html elements but not for files!
Here's the code I have:
<!DOCTYPE html>
<html>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
#drop_zone {
border: 5px solid blue;
width: 200px;
height: 100px;
}
</style>
<script>
function dropHandler(ev) {
console.log('File(s) dropped');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
function dragOverHandler(ev) {
console.log('File(s) in drop zone');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
function dragEnterHandler(ev) {
console.log('Entered drop zone');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
function dragLeaveHandler(ev) {
console.log('Left drop zone');
// Prevent default behavior (Prevent file from being opened)
ev.preventDefault();
}
</script>
<body>
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragenter="dragEnterHandler(event);" ondragleave="dragLeaveHandler(event)">
<p>Drag one or more files to this Drop Zone ...</p>
</div>
</body>
</html>
All the other drop events are triggered except for ondrop.
·
Juan Pablo Isaza
Answer question