[ACCEPTED]-HTML5 Drag and Drop ondragover not firing in Chrome-event-dispatching

Accepted answer
Score: 12

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

I've 13 updated the snippet http://jsfiddle.net/G9mJw/20/ which now works in 12 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 11 there's some more information about how 10 this works at: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data and this mention things 9 like:

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

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

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

Score: 4

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

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

Score: 0

I had trouble with mime types.

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

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

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

More Related questions