JSFiddle - React, Tailwind, and code Playground
HTML
<div id="drop"></div>
<h2>
Drag a file from your desktop into the red box. An alert should pop up.</h2>
<br><br>
<h3>Works in jquery 1.5, but not in 1.6</h3>
CSS
#drop {
height: 300px;
width: 300px;
border: 1px solid red;
}
JavaScript
$(function(){
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
alert('hi')
}
$('#drop').bind('dragenter', dragenter, false);
$('#drop').bind('dragover', dragover, false);
$('#drop').bind('drop', drop, false);
});