HTML5 Drag and Drop ondragover not firing in Chrome

Question

I have this simple example here which is not firing in Chrome 11 for me http://jsfiddle.net/G9mJw/ which consists on a very simple code:

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}


dropzone.addEventListener('dragover', onDragOver, false);

It seems to work fine in safari tho...but in Chrome the dragover event is not being called when the red square touch the dotted one.

I've tried to replicate some examples which have this currently working in chrome but it din't work for me either.

I've tried prevent the default behaviour to see it if worked but it didn't. any help would be very appreciated.

thanks

Polygamous

It works for me in Chrome 12 (latest released). Maybe 11 didn't support it yet? – Hobnob

weird, I just tried with 12.0.742.100 and it still not working...the counter doesn't add 1 for each event fired...which means is not being fired. Also it is even weirder since html5demos.com/drag works without problem even on 11. – Polygamous

Answer 1

It seems that it is needed to set some data to the draggable element on the dragstart event for the dragover event to be fired on the dropzone.

I've updated the snippet http://jsfiddle.net/G9mJw/20/ which now works in chrome as well.

and the new code as follows:

var dropzone = document.getElementById('dropzone'),
    draggable = document.getElementById('draggable');


function onDragStart(event) {
    event.dataTransfer.setData('text/html', null); //cannot be empty string
}

function onDragOver(event) {
    var counter = document.getElementById('counter');
    counter.innerText = parseInt(counter.innerText, 10) + 1;
}   

draggable.addEventListener('dragstart', onDragStart, false);
dropzone.addEventListener('dragover', onDragOver, false);

Also there's some more information about how this works at: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data and this mention things like:

When a drag occurs, data must be associated with the drag which identifies what is being dragged.

Which make easier to understand... I am just trying to figure out how does this works in Safari without the need to send some data? or perhaps it already send some content as default?

Also the event.dataTransfer.setData('text/html', null); method, curiously cannot send an empty string like event.dataTransfer.setData('text/html', ''); otherwise the dragover event will not be dispatched.

Polygamous

an interesting addendum, if you happen to be using jQuery, for me at least, it appears that the event object passed to my drag functions doesn't contain the dataTransfer object. I have to switch from $('.foo').live('dragstart',...) to elem.addEventListener('dragstart',...) to make my events work correctly – Daedal

what if the dragging object isn't even from your browser? (ie: from another browser instead?) – Lynnett

@Daedal if you are using jQuery, you can in fact add the dataTransfer object to the event object using jQuery.event.props.push("dataTransfer"); (see "Other Properties" on api.jquery.com/category/events/event-object) – Embus

@Embus Very useful. They do warn it adds overhead to all events so worth considering how much of your UI uses drag and drop compared to other events before just diving in and adding it. – Daedal

This fiddle seems incompatible with certain versions of jQuery – Electrostatic

the linked jsfiddle doesn't work (no dragover events get registered) in my chromium Version 51.0.2704.63 (64-bit) on archlinux. Weirdly, if I drag over the red square from a firefox instance to my chromium, it works. This is costing me a lot of time and I'm out of ideas. Any help greatly appreciated. – Patisserie

Answer 2

Chrome currently only supports a few data types — if your data does not have a recognized MIME Type the drag/drop simply doesn't proceed. This is very clearly in violation of the W3C Spec, and is not a problem in Firefox (so long as you provide some sort of data) or even Safari (which allows the drag to proceed whether data is set or not).

The Chromium bug report is here: http://code.google.com/p/chromium/issues/detail?id=93514

Goodwife

"text/html" should be ok, no? It's not working for me with that, either. See my comment to answer by zanona. – Patisserie

They seem to have fixed it, if I edit the JSFiddle linked from that ticket (jsfiddle.net/pimvdb/HU6Mk/10) and re-run it, Chrome does allow dragging of "text/html" and other content-types now. – Goodwife

Answer 3

I had trouble with mime types.

W3Schools has a page you can experiment with: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

Their code sample would not work for me until I changed getData and setData to "text/html" instead of "Text".

I am using: Version 34.0.1847.116 Ubuntu 14.04 aura (260972)

Micron