Javascript Drag And Drop With Partial Preventdefault

Gmail handles its drag-and-drop file attachment uploading in a few clever ways: 1) Dragging a file into the browser causes the dropzone to appear. The cursor displays feedback ind

Solution 1:

I believe they are setting dataTransfer.effectAllowedon dragover, depending on the dataTransfer.types attribute.

EDIT: I was wrong the first time, here are the actual values for types(in Chrome at least): - dragging text ["text/html","text","text/plain"] - dragging a file ["Files"]

Here is a short jsFiddle example to play around with.

You can check more info about drag and drop at w3c or mdc.

EDIT: I managed to implement the exact behavior on Chrome and FF (see here)