[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)

Source: stackoverflow.com

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

firefox ondrop event.dataTransfer is null after update to version 52

jQuery pass element to dataTransfer property

How to get dropped file names in PyQt/PySide

how to stop Drag event in OnBeginDrag() in unity 4.6

jQuery drag and drop - how to get at element being dragged

Drag and Drop: How to get the URL of image being dropped if image is a link (not the url of the link)

HTML drag and drop sortable tables

Angular ng-sortable - Basic example of how it works

OnDrop Event Target is children when dropped over children, even when Capture phase is used

List Sorting with HTML5 Drag'n'Drop - Drop Above or Below Depending on Mouse