HTML5 Drag and Drop ondragover pas de tir dans Chrome

Question

Je cet exemple simple ici qui ne tirait pas dans Chrome 11 pour moi http://jsfiddle.net/G9mJw/ qui consiste en un code très 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); 

Il semble fonctionner correctement dans Safari mais ... dans Chrome l'événement dragover n'est pas appelé lorsque le carré rouge touche le pointillé.

J'ai essayé de reproduire certains exemples qui fonctionnent actuellement en chrome mais ça ne marche pas non plus pour moi.

J'ai essayé d'empêcher le comportement par défaut de le voir si cela fonctionnait mais ce n'est pas le cas. Toute aide serait très appréciée.

grâce

Answer 1

Il semble qu'il est nécessaire de définir des données à l'élément draggable sur l'événement dragstart pour l'événement dragover être tiré sur la zone de saut.

J'ai mis à jour l'extrait http://jsfiddle.net/G9mJw/20/ qui fonctionne également en chrome.

et le nouveau code comme suit:

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

il y a aussi un peu plus d'informations sur la façon dont cela fonctionne à: https://developer.mozilla.org/En/DragDrop/Drag_Operations#Drag_Data et ces choses mention comme:

Lorsqu'un glisser se produit, les données doivent être associé à la traînée qui identifie ce qui est traîné.

qui rendent plus facile à comprendre ... Je suis juste essayer de comprendre comment cela fonctionne ne dans Safari sans qu'il soit nécessaire d'envoyer des données? ou peut-être envoie-t-il déjà du contenu par défaut?

Également la méthode event.dataTransfer.setData('text/html', null);, curieusement ne peut pas envoyer une chaîne vide comme event.dataTransfer.setData('text/html', ''); sinon l'événement dragover ne sera pas distribué.

Answer 2

Chrome ne prend actuellement en charge que quelques types de données - si vos données n'ont pas de type MIME reconnu, le glisser/déposer ne fonctionne tout simplement pas. Ceci est très clairement en violation de la spécification W3C, et n'est pas un problème dans Firefox (tant que vous fournissez une sorte de données) ou même Safari (qui permet de faire glisser si les données sont définies ou non).

Le rapport chrome bug est ici: http://code.google.com/p/chromium/issues/detail?id=93514

Answer 3

J'ai eu des problèmes avec les types MIME.

W3Schools a une page que vous pouvez expérimenter avec: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop2

Leur exemple de code ne fonctionnerait pas pour moi jusqu'à ce que je l'ai changé getData et setData "text/html" au lieu de "Texte".

J'utilise: version 34.0.1847.116 aura Ubuntu 14,04 (260972)