Prevent browser from loading a drag-and-dropped file
You can add a event listener to the window that calls preventDefault() on all dragover and drop events.
Example:
window.addEventListener("dragover",function(e){ e = e || event; e.preventDefault();},false);window.addEventListener("drop",function(e){ e = e || event; e.preventDefault();},false);
After a lot of fiddling around, I found this to be the stablest solution:
var dropzoneId = "dropzone";window.addEventListener("dragenter", function(e) { if (e.target.id != dropzoneId) { e.preventDefault(); e.dataTransfer.effectAllowed = "none"; e.dataTransfer.dropEffect = "none"; }}, false);window.addEventListener("dragover", function(e) { if (e.target.id != dropzoneId) { e.preventDefault(); e.dataTransfer.effectAllowed = "none"; e.dataTransfer.dropEffect = "none"; }});window.addEventListener("drop", function(e) { if (e.target.id != dropzoneId) { e.preventDefault(); e.dataTransfer.effectAllowed = "none"; e.dataTransfer.dropEffect = "none"; }});<div id="dropzone">...</div>Setting both effectAllow and dropEffect unconditionally on the window causes my drop zone not to accept any d-n-d any longer, regardless whether the properties are set new or not.
For jQuery the correct answer will be:
$(document).on({ dragover: function() { return false; }, drop: function() { return false; }});Here return false will behave as event.preventDefault() and event.stopPropagation().