HTML5 D&D: dataTransfer data has to be set to allow drop

This is a quick tip for those that are still bold (or stupid) enough to try the incredibly messy HTML5 Drag & Drop spec.

If you’re dragging div’s around and made them draggable (draggable=true) but wonder why the “dragover” event never fires on the target on Chrome: You have to set data on the transfer. Add this to your “dragstart” event:

event.dataTransfer.setData('text/html', null);

Now forget this and stop using the Drag & Drop API. Thanks to Stack Overflow for finding this.

3 Comments

Kelly Andrews (@1618design)  on June 4th, 2012

HTML5 D&D: dataTransfer data has to be set to allow drop http://t.co/jdgiaWNa #jquery

Rildo Pragana (@rpragana)  on June 5th, 2012

The Sea of Ideas » HTML5 D&D: dataTransfer data has to be set to allow drop
http://t.co/6loYyP7V

javascript (@plainJavaScript)  on June 5th, 2012

HTML5 D&D: dataTransfer data has to be set to allow drop 0 http://t.co/UX9vblAE

Have a comment or question?