Arrastre HTML5 y soltar ondragover no disparar en Chrome

Question

tengo este sencillo ejemplo aquí que no está disparando en Chrome 11 para mí http://jsfiddle.net/G9mJw/ que consiste en un código muy simple:

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

Parece que funciona bien en Safari aunque ... en Chrome el evento dragover no se está llamando cuando el cuadrado rojo toca el de puntos.

He intentado reproducir algunos ejemplos que tienen este trabajo actualmente en cromo, pero tampoco me sirve.

He intentado evitar el comportamiento predeterminado para ver si funcionó, pero no fue así. Cualquier ayuda será muy apreciada.

gracias

Answer 1

Parece que se necesita para establecer algunos datos al elemento arrastrable sobre el evento para el evento dragstartdragover para ser disparado en la zona de saltos.

He actualizado el fragmento http://jsfiddle.net/G9mJw/20/ que ahora también funciona en Chrome.

y el nuevo código de la siguiente manera:

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

También hay un poco de más información acerca de cómo funciona esto en: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data y esta mención cosas como:

Cuando se produce una fricción, los datos deben estar asociado con el arrastre que identifica lo que se está arrastrando.

que hacen más fácil de entender ... Estoy tratando de averiguar cómo esto funciona en Safari sin la necesidad de enviar algunos datos? o tal vez ya envíe algún contenido como predeterminado?

También el método event.dataTransfer.setData('text/html', null);, curiosamente no puede enviar una cadena vacía como event.dataTransfer.setData('text/html', '');, de lo contrario, el evento dragover no se enviará.

Answer 2

Actualmente, Chrome solo admite algunos tipos de datos: si sus datos no tienen un tipo MIME reconocido, la función de arrastrar/soltar simplemente no continúa. Esto es claramente una violación de la Especificación W3C, y no es un problema en Firefox (siempre que proporcione algún tipo de datos) o incluso Safari (que permite que la acción de arrastre continúe si los datos están configurados o no).

El cromo informe de error es aquí: http://code.google.com/p/chromium/issues/detail?id=93514

Answer 3

que tenían problemas con tipos MIME.

W3Schools tiene una página se puede experimentar con: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

Su ejemplo de código no funcionaría para mí hasta que cambié getData y setData a "text/html" en lugar de "texto".

estoy usando: versión 34.0.1847.116 Ubuntu 14.04 aura (260.972)