HTML5 Drag and Drop OnDragOver non sparare in Chrome

Question

ho questo semplice esempio qui, che non è sparare in Chrome 11 per me http://jsfiddle.net/G9mJw/ che consiste in un codice molto semplice:

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

sembra funzionare bene in Safari tuttavia ... in Chrome l'evento dragover non viene chiamato quando il quadrato rosso tocca il punto tratteggiato.

Ho provato a replicare alcuni esempi che attualmente funzionano in chrome ma non funzionano nemmeno per me.

Ho provato a prevenire il comportamento predefinito per vederlo se funzionava, ma non lo ha fatto. ogni aiuto sarebbe molto apprezzato.

grazie

Answer 1

Sembra che è necessario impostare alcuni dati per l'elemento trascinabile sull'evento dragstart per l'evento dragover di essere licenziato sulla zona di lancio.

Ho aggiornato lo snippet http://jsfiddle.net/G9mJw/20/ che ora funziona anche in chrome.

e il nuovo codice come segue:

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

Inoltre c'è qualche informazione in più su come funziona in: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data e Tale dicitura cose come:

Quando si verifica un trascinamento, i dati devono essere associato al trascinamento che identifica ciò che viene trascinato.

che rendono più facile da capire ... sto solo cercando di capire come funziona questo funziona in Safari, senza la necessità di inviare alcuni dati? o forse già invia qualche contenuto come predefinito?

Anche il metodo event.dataTransfer.setData('text/html', null);, curiosamente, non può inviare una stringa vuota come event.dataTransfer.setData('text/html', ''); altrimenti l'evento dragover non verrà inviato.

Answer 2

Chrome attualmente supporta solo alcuni tipi di dati: se i dati non hanno un tipo MIME riconosciuto, il trascinamento/rilascio semplicemente non procede. Ciò è molto chiaramente in violazione delle specifiche W3C, e non è un problema in Firefox (a patto che tu fornisca un po 'di dati) o persino Safari (che permetta al trascinamento di procedere indipendentemente dal fatto che i dati siano impostati o meno).

Il cromo bug report è qui: http://code.google.com/p/chromium/issues/detail?id=93514

Answer 3

ho avuto problemi con i tipi MIME.

W3Schools ha una pagina si può sperimentare con: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

Il loro esempio di codice non avrebbe funzionato per me fino a quando ho cambiato getData e setData a "text/html" al posto di "Testo".

sto usando: versione 34.0.1847.116 Ubuntu 14.04 aura (260.972)