preventDefault(); doesn´t have any effect on a drop event

Question

I have a picture-upload-<div> where the user can drop images. The preventDefault(); on that <div>-element works fine.

But when the user drops the picture outside of the <div> the browser opens it.

To prevent that I added:

$(document).ready(function(){

    $('body').on('drop', function(e){
        e.preventDefault();
    });
});

The eventhandler gets triggered, but the preventDefault();-action does have no effect. The browser always loads the picture.

Have you seen this similar topic here? https://stackoverflow.com/questions/6756583/prevent-browser-from-loading-a-drag-and-dropped-file — Melas, Feb 20 '19 at 01:23

score 1 · Accepted Answer · answered Feb 20 '19 at 01:33

1

You should specify a default parameter. Also add a dragover event listener:

$(() => {
  $("body").on("drop", (e = event) => e.preventDefault())
      .on("dragover", (e = event) => e.preventDefault());
});

answered Feb 20 '19 at 01:33

Jack Bashford

1 Answers1