Problema pagina fantacalcio con ie (in firefox fa perfettamente)

[jackfruscianter]

Partendo dall'articolo sul drag & drop in HTML5 (e facendo mooooooooolta strada) 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

[jackfruscianter]

Vi posto il codice della pagina, ho verificato che non funziona anche con opera ma credo che quest'ultimo non supporti il drag&drop

<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[i].tagName && zone[i].tagName.toLowerCase() == "div") {
zone[i].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[i].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[i].ondragover = function(event) {
return false;
}
zone[i].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[i].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;

var sostdrop=function(giocatore){
var campo = document.getElementById("campo").childNodes;
for(var x = 0; x<campo.length; x++) {
if(campo[x].tagName && campo[x].tagName.toLowerCase() == "div") {
var titolo=campo[x].title.split("-");
if (titolo[1]==giocatore) {
var indice=campo[x].id.split("p");
var salvaclass=campo[x].className.split(" ");
campo[x].className= salvaclass[0]+" "+salvaclass[1];
campo[x].title=titolo[0];
if (indice[1]==0) {
campo[x].innerHTML="<div class=descrizione>P</div>";
} else if (indice[1]<=5) {
campo[x].innerHTML="<div class=descrizione>D</div>";
} else if (indice[1]<=10) {
campo[x].innerHTML="<div class=descrizione>C</div>";
} else if (indice[1]<=13) {
campo[x].innerHTML="<div class=descrizione>A</div>";
} else {
campo[x].innerHTML="<div class=descrizione>RIS</div>";
}
}
}
}
}

var formazione=function() {
var campo = document.getElementById("campo").childNodes;
var por=0;
var dif=0;
var cen=0;
var att=0;
for(var i = 0; i<campo.length; i++) {
if(campo[i].tagName && campo[i].tagName.toLowerCase() == "div") {
var salvaclass=campo[i].className.split(" ");
var salvatitle=campo[i].title.split("-");
if (salvaclass[2]=="ok") {
if (salvatitle[0]=="portiere") {
por++;
} else if (salvatitle[0]=="difensore") {
dif++;
} else if (salvatitle[0]=="centrocampista") {
cen++;
} else if (salvatitle[0]=="attaccante") {
att++;
}
}
}
}
var formazione=dif+"-"+cen+"-"+att;
formazione=formazione.split("-");
var schema=document.getElementById("schema");
schema.innerHTML=dif+"-"+cen+"-"+att;
var somma=parseInt(formazione[0])+parseInt(formazione[1])+parseInt(formazione[2]);
var classe=schema.className.split(" ");
if (somma>10) {
schema.className="invalido";
} else if (somma==10) {
if ((parseInt(formazione[0])>5)||(parseInt(formazione[0])<3)) {
schema.className="invalido";
} else if ((parseInt(formazione[1])>5)||(parseInt(formazione[1])<3)) {
schema.className="invalido";
} else if ((parseInt(formazione[2])>3)||(parseInt(formazione[2])<1)) {
schema.className="invalido";
} else if(por==1) {
schema.className="valido";
}
} else {
schema.className="";
}
if (schema.className=="invalido") {
window.alert('COGLIONE!\nHai inserito una formazione errata.');
}
}

var chkform=function(){
var schema=document.getElementById("schema");
if (schema.className=="valido") {
return true;
}
else {
window.alert('COGLIONE!\nHai inserito una formazione errata.');
return false;
}
}

var utilizzato= function(codice){
var rosa = document.getElementsByClassName("drag");
for(var x = 0; x<campo.length; x++) {
if(campo[x].tagName && campo[x].tagName.toLowerCase() == "div") {
var classe=rosa[x].className;
var titolo=rosa[x].title.split("-");
if (codice==titolo[3]) {
rosa[x].className+=" "+"used"
}
}
}
}

var rimuovi= function(titolo) {
var campo = document.getElementById("campo").childNodes;
titolo=titolo.replace("p","");
for(var i = 0; i<campo.length; i++) {
if(campo[i].tagName && campo[i].tagName.toLowerCase() == "div") {
var indice=campo[i].id.split("p");
if (indice[1]==titolo) {
var salvaclass=campo[i].className.split(" ");
campo[i].className= salvaclass[0]+" "+salvaclass[1];
var titolo=campo[i].title.split("-");
campo[i].title=titolo[0];
if (indice[1]==0) {
campo[i].innerHTML="<div class=descrizione>P</div>";
break;
} else if (indice[1]<=5) {
campo[i].innerHTML="<div class=descrizione>D</div>";
break;
} else if (indice[1]<=10) {
campo[i].innerHTML="<div class=descrizione>C</div>";
break;
} else if (indice[1]<=13) {
campo[i].innerHTML="<div class=descrizione>A</div>";
break;
} else {
campo[i].innerHTML="<div class=descrizione>RIS</div>";
break;
}
}
}
}
formazione();
}

var cancella=function () {
var campo = document.getElementById("campo").childNodes;
for(var i = 0; i<campo.length; i++) {
if(campo[i].tagName && campo[i].tagName.toLowerCase() == "div") {
var salvaclass=campo[i].className.split(" ");
campo[i].className= salvaclass[0]+" "+salvaclass[1];
var titolo=campo[i].title.split("-");
campo[i].title=titolo[0];
if (i<=1) {
campo[i].innerHTML="<div class=descrizione>P</div>";
} else if (i<=6) {
campo[i].innerHTML="<div class=descrizione>D</div>";
} else if (i<=11) {
campo[i].innerHTML="<div class=descrizione>C</div>";
} else if (i<=14) {
campo[i].innerHTML="<div class=descrizione>A</div>";
} else {
campo[i].innerHTML="<div class=descrizione>RIS</div>";
}
}
}
formazione();
}
</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>

[jackfruscianter]

Grazie per i mille suggerimenti ed il supporto.

Comuque perdendoci un paio di giornate sono riuscito a risolvere 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. Spero magari con questo post di essere d'aiuto per chi un giorno incontrasse le mie stesse difficoltà.

Mi resta un unico problema:

players[i].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?