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

It works for me in Chrome 12 (latest released). Maybe 11 didn't support it yet? — Halcyon, Jun 26 '11 at 00:03
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 http://html5demos.com/drag works without problem even on 11. — zanona, Jun 26 '11 at 08:29

score 11 · Accepted Answer · answered Jun 26 '11 at 09:38

11

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.

answered Jun 26 '11 at 09:38

zanona

12,345
25
86
141

2

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 – Endophage Aug 26 '11 at 02:03
2

what if the dragging object isn't even from your browser? (ie: from another browser instead?) – ericslaw Sep 29 '11 at 23:36
1

@Endophage 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 http://api.jquery.com/category/events/event-object/) – Ben Jul 04 '12 at 04:41
@Ben 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. – Endophage Jul 04 '12 at 16:15
This fiddle seems incompatible with certain versions of jQuery – Sentinel Jun 29 '14 at 14:34
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. – molecular Jun 03 '16 at 13:09

score 4 · Answer 2 · answered Feb 16 '12 at 00:01

4

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

answered Feb 16 '12 at 00:01

natevw

16,807
8
66
90

"text/html" should be ok, no? It's not working for me with that, either. See my comment to answer by zanona. – molecular Jun 03 '16 at 13:11
They seem to have fixed it, if I edit the JSFiddle linked from that ticket (http://jsfiddle.net/pimvdb/HU6Mk/10/) and re-run it, Chrome does allow dragging of "text/html" and other content-types now. – natevw Jun 04 '16 at 14:01

score 0 · Answer 3 · answered Jun 27 '14 at 14:04

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)

HTML5 Drag and Drop ondragover not firing in Chrome

3 Answers3