Drag & drop HTML5. Problema con ie e chrome!

[dellaemme]

Ho sviluppato una pagina per l'invio delle formazioni del sito che ho fatto per il fantacalcio tra amici.

Utilizzo sempre firefox e ho fatto tutti i controlli con il detto browser.

Su firefox l'unico problema che ho riscontrato è che lo script che effettua le reflections delle immagini in alto non funziona, mentre il resto funziona tutto alla perfezione, mentre sul maledetto IE non mi parte nemmeno il drag&drop! E nemmeno mi segnala errori javascript!!!

Qualcuno mi saprebbe aiutare?

Questa è la pagina che ho fatto:

http://www.compagnidimerende.com/rose/formazione.php


facendo delle prove (almeno con chrome) ho notato che il problema sta in event.dataTransfer.setData e event.dataTransfer.getData, in pratica non si riescono a passare il dato che gli do io, non so se è un problema nella fase di set o di get.
Spero che il problema sia il medesimo, anche se su ie non da proprio segno di vita!



<script type="text/javascript">
var inizio = function() {
var campo = document.getElementById("campo");
var zone = campo.childNodes;
for(var i = 0; i<zone.length; i++) {
if(zone.tagName && zone.tagName.toLowerCase() == "div") {
zone.ondragenter = function(event) {
var classe=this.className.split(" ");
var accceptedRole = this.title.split("-");
var roles = event.dataTransfer.getData("roles");
var roles_array= roles.split("-");
var valido="";
if (classe[2]=="ok") {
valido=" ok";
}
if((accceptedRole[0] == roles_array[0])||(accceptedRole[0]=="panchinaro")) {
this.className =classe[0]+" "+classe[1]+valido+" valid";

} else {
this.className =classe[0]+" "+classe[1]+valido+" invalid";
}
}
zone.ondragleave = function(event) {
var ruolo = this.title.split("-");
this.className=this.className.replace("valid","");
this.className=this.className.replace("invalid","");
var abilitato= this.className.split(" ");
if (abilitato[2]=="ok") {
abilitato[2]=" ok";
}
else {
abilitato[2]="";
}
if (ruolo[0] == "portiere") {
this.className = "field zonep"+abilitato[2];
} else if (ruolo[0] == "difensore") {
this.className = "field zonedc"+abilitato[2];
} else if (ruolo[0] == "centrocampista") {
this.className = "field zonedc"+abilitato[2];
} else if (ruolo[0] == "attaccante") {
this.className = "field zonea"+abilitato[2];
} else {
this.className = "field zoner"+abilitato[2];
}
}
zone.ondragover = function(event) {
return false;
}
zone.ondrop = function(event) {
event.preventDefault();
var indice = this.id;
var accceptedRole = this.title.split("-");
this.className=this.className.replace("valid","");
this.className=this.className.replace("invalid","");
var roles = event.dataTransfer.getData("roles");
var roles_array= roles.split("-");
sostdrop(roles_array[3]);
if ((accceptedRole[0]==roles_array[0])||(accceptedRole[0]=="panchinaro")) {
this.className+= " ok";
if (accceptedRole[0] == "portiere") {
this.innerHTML = "<div class=\"descrizione\">P</div>";
} else if (accceptedRole[0] == "difensore") {
this.innerHTML = "<div class=\"descrizione\">D</div>";
} else if (accceptedRole[0] == "centrocampista") {
this.innerHTML = "<div class=\"descrizione\">C</div>";
} else if (accceptedRole[0] == "attaccante") {
this.innerHTML = "<div class=\"descrizione\">A</div>";
} else {
this.innerHTML = "<div class=\"descrizione\">RIS</div>";
}
var copia=indice.split("p");
this.title = accceptedRole[0] +"-" +roles_array[3];
this.innerHTML += "<a title=" + indice + " onclick=rimuovi('"+ indice +"')><img src=../images/formazioni/cestino.gif alt=elimina height=10 width=10 class=remove></a><img src=../images/squadre/"+roles_array[2].toLowerCase()+".gif alt=squadre class=squadre draggable=false>" + roles_array[1]+"<input type=hidden name=g"+copia[1]+" value='"+roles_array[1]+"'>";
formazione();
}

}
}
}
var players = document.getElementsByClassName("player");
var icon = document.createElement('img');
for(var i = 0;i<players.length; i++) {
players.ondragstart = function(event) {
var squadra=this.title.split("-");
icon.src = '../images/squadre/'+squadra[2].toLowerCase()+'.gif';
event.dataTransfer.setData("roles", this.title);
event.dataTransfer.setDragImage(icon, 16, 10);
}
}
}
onload = inizio;

</script>

e questa è la parte di codice interessata dal drag

<div class=lista>
<h3>Portieri</h3>
<div class=drag>
<div title='portiere-ABBIATI Christian-MILAN-101' draggable=true class=player>ABBIATI Christian</div></div>
<div class=drag><div title='portiere-AMELIA Marco-MILAN-103' draggable=true class=player>AMELIA Marco</div></div>
<h3>Difensori</h3>
<div class=drag><div title='difensore-ANTONINI Luca-MILAN-207' draggable=true class=player>ANTONINI Luca</div></div>
<div class=drag><div title='difensore-CANNAVARO Paolo-NAPOLI-233' draggable=true class=player>CANNAVARO Paolo</div></div>
<h3>Centrocampisti</h3>
<div class=drag><div title='centrocampista-CAMBIASSO Esteban Matias-INTER-527' draggable=true class=player>CAMBIASSO Esteban M.</div></div>
<div class=drag><div title='centrocampista-CONTI Daniele-CAGLIARI-536' draggable=true class=player>CONTI Daniele</div></div>
<h3>Attaccanti</h3>
<div class=drag><div title='attaccante-BOJINOV Valeri-PARMA-818' draggable=true class=player>BOJINOV Valeri</div></div>
<div class=drag><div title='attaccante-BORRIELLO Marco-ROMA-819' draggable=true class=player>BORRIELLO Marco</div></div>
<div class=drag><div title='attaccante-DENIS German-UDINESE-833' draggable=true
</div>
<form name="formazione" action="upload.php" method="post" onSubmit="return chkform()">
<div class="formazione">Formazione:<div id="schema">0-0-0</div></div>
<div id="campo">
<div id=p0 class='field zonep' title=portiere draggable=false><div class=descrizione>P</div></div>
<div id=p1 class='field zonedc' title=difensore draggable=false><div class=descrizione>D</div></div>
<div id=p2 class='field zonedc' title=difensore draggable=false><div class=descrizione>D</div></div>
<div id=p3 class='field zonedc' title=difensore draggable=false><div class=descrizione>D</div></div>
<div id=p4 class='field zonedc' title=difensore draggable=false><div class=descrizione>D</div></div>
<div id=p5 class='field zonedc' title=difensore draggable=false><div class=descrizione>D</div></div>
<div id=p6 class='field zonedc' title=centrocampista draggable=false><div class=descrizione>C</div></div>
<div id=p7 class='field zonedc' title=centrocampista draggable=false><div class=descrizione>C</div></div>
<div id=p8 class='field zonedc' title=centrocampista draggable=false><div class=descrizione>C</div></div>
<div id=p9 class='field zonedc' title=centrocampista draggable=false><div class=descrizione>C</div></div>
<div id=p10 class='field zonedc' title=centrocampista draggable=false><div class=descrizione>C</div></div>
<div id=p11 class='field zonea' title=attaccante draggable=false><div class=descrizione>A</div></div>
<div id=p12 class='field zonea' title=attaccante draggable=false><div class=descrizione>A</div></div>
<div id=p13 class='field zonea' title=attaccante draggable=false><div class=descrizione>A</div></div>
<div id=p14 class='field zoner' title=panchinaro draggable=false><div class=descrizione>RIS</div></div>
<div id=p15 class='field zoner' title=panchinaro draggable=false><div class=descrizione>RIS</div></div>
<div id=p16 class='field zoner' title=panchinaro draggable=false><div class=descrizione>RIS</div></div>
</div>
<input value="Invia formazione" type="submit" name="invio">
<input value="Pulisci" type="button" onClick="cancella()">
</form>

 

[dellaemme]

Ho risolto quasi tutti i problemi, ho creato un input hidden per "trasportare" i dati anche con chrome, e fatto una modifica al css per farlo funzionare anche con ie. Mi resta un unico problema:

players.ondragstart = function(event) {
setdata.value="";
var squadra=this.title.split("-");
event.dataTransfer.setData("roles", this.title);
setdata.value=this.title;
}

in particolare la riga event.dataTransfer.setData("roles", this.title);
se la tolgo (perchè di fatto non la uso) con ie va perfettamente mentre firefox non parte il drag, mentre se la metto su firefox va perfettamente mentre ie va in errore su questa riga.

Qualche idea?