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
3 respuestas
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á.
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
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)
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.