Disable dragging and dropping the file system image into the browser.

Question

I am experimenting with the HTML5 API. However, I notice that browsers have default behavior when they display an image if you drag the image into the browser. However, this can be annoying if your goal is to upload an image rather than view it.

I am wondering if there is a way to prevent this behavior? I tried stopPropagation / preventDefault in the ondrop event, which works somewhat, but leaves the drop cursor in place, giving the impression that the image can be dropped anywhere on the page.

Ideally, you will only see the drop cursor in the designated area where the images should be dropped.

Answer 1

The dataTransfer object has dropEffect and effectAllowed properties. It is unclear what the difference is between them, but setting both parameters to none should help.

$(document).bind({ dragenter: function (e) { e.stopPropagation(); e.preventDefault(); var dt = e.originalEvent.dataTransfer; dt.effectAllowed = dt.dropEffect = 'none'; }, dragover: function (e) { e.stopPropagation(); e.preventDefault(); var dt = e.originalEvent.dataTransfer; dt.effectAllowed = dt.dropEffect = 'none'; } }); 

See http://jsfiddle.net/andreymir/H3RR7/embedded/result/ - for rectangle only.

Answer 2

Perhaps this is what you are looking for? I developed it myself.

http://rightandrong.info/html5upload/Upload.html