Tengo este ejemplo simple aquí que no se 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 funcionar bien en safari aunque ... pero en Chrome el evento dragover no se llama cuando el cuadrado rojo toca el punteado.

He intentado replicar algunos ejemplos que actualmente funcionan en Chrome, pero tampoco funcionan para mí.

Intenté evitar el comportamiento predeterminado para ver si funcionaba, pero no fue así. Cualquier ayuda será muy apreciada.

Gracias

10
zanona 26 jun. 2011 a las 03:16

3 respuestas

La mejor respuesta

Parece que es necesario establecer algunos datos en el elemento arrastrable en el evento dragstart para que el evento dragover se active en la zona de caída.

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

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 más información sobre cómo funciona esto en: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data y esto menciona cosas como:

Cuando ocurre un arrastre, los datos deben estar asociados con el arrastre que identifica lo que se está arrastrando.

Lo que hace que sea más fácil de entender ... Solo estoy tratando de averiguar cómo funciona esto en Safari sin la necesidad de enviar algunos datos. o tal vez ya envía algún contenido por defecto?

Además, 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á.

11
zanona 26 jun. 2011 a las 09:38

Actualmente, Chrome solo admite algunos tipos de datos: si sus datos no tienen un tipo MIME reconocido, simplemente arrastre / suelte simplemente no se ejecuta. Esto viola claramente 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 el arrastre continúe si los datos están configurados o no).

El informe de errores de Chromium está aquí: http://code.google.com/ p / chromium / issues / detail? id = 93514

4
natevw 16 feb. 2012 a las 00:01

Tuve problemas con los tipos mimos.

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

Su código de muestra no funcionaría para mí hasta que cambie getData y setData a "text / html" en lugar de "Text".

Estoy usando: Versión 34.0.1847.116 Ubuntu 14.04 aura (260972)

0
Anthony Scaife 27 jun. 2014 a las 14:04