Drag & drop HTML5. Problema con ie e chrome!

dellaemme

Nuovo Utente
3 Nov 2010
2
0
0
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

Nuovo Utente
3 Nov 2010
2
0
0
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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
L [Javascript] Drag and drop. Aggiornamento Campo Javascript 2
J Jquery ui drag drop move jQuery 0
G Piccolo problema con il Drag&Drop jQuery 0
S Selezionare files con drag and drop prima di upload PHP 0
A Drag and drop per ipad , questo sconosciuto... Javascript 1
R ordinamento immagini con drag and drop e memorizzazione db PHP 1
A copiare dati in mysql con drag & drop jQuery 0
P drag e drop disabilitato con jquery Javascript 1
max1974 grid e json con drag e drop jQuery 0
M Upload con drag and drop PHP 1
zighy memorizzare gli elementi di un drag n drop Javascript 4
zighy drag drop Javascript 11
D Drag and drop immagini non compatibile con FF Javascript 1
renegade Vendo Agenda prenotazioni sistema Drag & Drop Offerte e Richieste di Lavoro e/o Collaborazione 0
WorldWideWeb Drag&Drop su TreeView Visual Basic 0
L java,oggetti grafici e drag and drop Java 2
J Drag and drop in vb Visual Basic 1
N drag & drop Flash 1
E drag & drop Flash 1
M complesso drag&drop Flash 0
Erzsébeth Drag div con class Javascript 9
Z Drag div solo all'interno del box Javascript 7
Z Errore DRAG DIV Javascript 1
Z Ogni Drag DIV ha le sue dimensioni Javascript 2
M Drag and Resize Javascript 0
M [PHP] Drop down in campo select PHP 1
M [PHP] Interrompere DROP TABLE con PDO PHP 0
O Drop menu o menu a tendina HTML e CSS 5
S Problema drop-down box PHP 22
R Drop database jolly MySQL 1
J Drop down menu HTML e CSS 0
M Creare un menu drop-down in app Android Sviluppo app per Android 1
P sito e-commerce drop shipping E-Commerce 3
A funzione per popolare un drop down list Javascript 4
D Come posso rendere obbligatorio un drop down menu? Javascript 12
S AIUTO piccola modifica Drop Down Menu Javascript 0
D Menu Drop Down HTML e CSS 0
F Drop Down Menu compatibile con internet explorer HTML e CSS 0
Trogo Mysql: Drop all tables MySQL 0
J FAQ Drop Down script Javascript 0
J Animated Drop Down Navigation Menu Javascript 0
Z Recupero Values da Drop Down menu: Questioni PHP 0
U Aiuto per Drop Down Menu tre livelli PHP 0
G menu orizzontale drop-down HTML e CSS 0
X-Zeus Drop-Down Menu in php PHP 3
D drop down & flash Javascript 0
S errore nel compilare una drop down list ASP.NET 0
D pattern html5 non va con asterisco HTML e CSS 6
B Vendo Temi per Wordpress e template html5 Altri Annunci 0
C Html5 game HTML e CSS 1

Discussioni simili