You can detect what is being dragged by inspecting dataTransfer.types
. This behaviour is not (yet) consistent across browsers so you have to check for the existence of 'Files'
(Chrome) and 'application/x-moz-file'
(Firefox).
// Show the dropzone when dragging files (not folders or page
// elements). The dropzone is hidden after a timer to prevent
// flickering to occur as `dragleave` is fired constantly.
var dragTimer;
$(document).on('dragover', function(e) {
var dt = e.originalEvent.dataTransfer;
if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))) {
$("#dropzone").show();
window.clearTimeout(dragTimer);
}
});
$(document).on('dragleave', function(e) {
dragTimer = window.setTimeout(function() {
$("#dropzone").hide();
}, 25);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropzone" style="border: 2px dashed black; background: limegreen; padding: 25px; margin: 25px 0; display: none; position">
🎯 Drop files here!
</div>
📄 hover files here