Ciao a tutti, ho preso spunto dall'articolo sul sito per fare una pagina per l'invio delle formazioni sul sito che ho fatto per il fantacalcio tra amici.
Mi diletto in php ma in javascript sono alle prime armi, ho modificato il codice dell'esempio fornito ma ad eccezione dell'icona che cambia una volta che mi posiziono sugli elementi draggabili non succede nulla.
Chi ha un pò di tempo da perdere potrebbe darmi una mano?
questo è il codice
codice:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="it-IT"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <META NAME="description" CONTENT="Fantacalcio dei compagni di merende "> <META NAME="Abstract" CONTENT="Compagnidimerende fantacalcio gazzetta compagni merende dellaemme gazzettadellosport fantagazzetta morciano rimini"> <META NAME="keywords" CONTENT="Compagnidimerende, compagni di merende, fantacalcio, gazzetta, compagni, merende, dellaemme, gazzettadellosport, gazzetta dello sport, fantagazzetta, morciano, morciano di romagna, rimini"> <META NAME="Language" CONTENT="IT"> <META NAME="Author" CONTENT="Paolo Della Marchina"> <META NAME="Designer" CONTENT="Paolo Della Marchina"> <META NAME="Distribution" CONTENT="Global"> <title>www.compagnidimerende.com</title> <link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico"> <link href="../css/Style.css" rel="stylesheet" type="text/css"> <link href="../css/lightbox.css" rel="stylesheet" type="text/css" media="screen"> <script type="text/javascript" src="../js/prototype.js"></script> <script type="text/javascript" src="../js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="../js/lightbox.js"></script> <script type="text/javascript" src="../js/reflection.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-151115-3']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script><style> #field {height: 430px;width: 500px;color: snow;background-image: url(../images/formazioni/field.png);float:left; text-align:center} #field .zonep {-moz-border-radius:7px 7px 7px 7px; border:2px solid #79A777; height:48px;width:85px;margin:auto;margin-top:14px} #field .zonedc {-moz-border-radius:7px 7px 7px 7px; border:2px solid #79A777; height:48px;width:85px;float:left;margin-left:9px;margin-top:14px} #field .zonea {-moz-border-radius:7px 7px 7px 7px; border:2px solid #79A777; height:48px;width:85px;float:left;margin-left:60px;margin-top:14px} #field .zoner {-moz-border-radius:7px 7px 7px 7px; border:2px solid #79A777; height:48px;width:85px;float:left;margin-left:29px;margin-top:25px} #field .valid {border: 2px solid orange; height:48px } #field .invalid {border: 2px solid red; height:48px;} div.lista {float:right} div.lista h3{color:#0000FF;font-size:14px;margin:0px;padding:0px} div.dropform {height:600px} div.drag {-moz-border-radius:7px 7px 7px 7px; background:none repeat scroll 0 0 #3F7137;border:2px solid #79A777;color:#FFFFFF;cursor:move;padding:0px; margin-bottom:1px;width:150px;font-size:10px} div.no-drag {cursor: default } </style> <script> var init = function() { var field = document.getElementById("field"); var zones = field.childNodes; var isAcceptedRole = function(role, roles) { for(var i = 0; i<roles.length; i++) { if(roles[i] == role) { return true } } return false; } for(var i = 0; i<zones.length; i++) { if(zones[i].tagName && zones[i].tagName.toLowerCase() == "div") { zones[i].ondragenter = function(event) { var accceptedRole = this.id.substring(6); var roles = event.dataTransfer.getData("roles").split(" "); if(isAcceptedRole(accceptedRole, roles)) { this.className = "valid"; } else { this.className = "invalid"; } } zones[i].ondragleave = function(event) { this.className = "zone"; } zones[i].ondragover = function(event) { return false; } zones[i].ondrop = function(event) { event.preventDefault(); var accceptedRole = this.id.substring(6); var roles = event.dataTransfer.getData("roles").split(" "); if(isAcceptedRole(accceptedRole, roles)) { this.innerHTML += event.dataTransfer.getData("player")+" "; } } } } var players = document.getElementsByclassname("player"); var icon = document.createElement('img'); icon.src = '../images/formazioni/maglia.png'; for(var i = 0;i<players.length; i++) { players[i].ondragstart = function(event) { // event.dataTransfer.setData("player", this.data-value); event.dataTransfer.setData("roles", this.title); event.dataTransfer.setDragImage(icon, -5, -5); } } } onload = init; </script> </head> <body> <a name=top></a> <div id="page"> <div id="header"> <span class="TitoloR">www.compagnidimerende.com</span> </div> <div id="container"> <div id="wrap"> <div class="roll">[img]../images/resized/1.jpg[/img]</div><div class="roll">[img]../images/resized/2.jpg[/img]</div><div class="roll">[img]../images/resized/3.jpg[/img]</div><div class="roll">[img]../images/resized/4.jpg[/img]</div><div class="roll">[img]../images/resized/5.jpg[/img]</div><div class="roll">[img]../images/resized/6.jpg[/img]</div><div class="roll">[img]../images/resized/7.jpg[/img]</div><div class="roll">[img]../images/resized/8.jpg[/img]</div><div class="roll">[img]../images/resized/9.jpg[/img]</div><div class="roll">[img]../images/resized/cs.jpg[/img]</div> </div> <div id="menu"> <ul id="nav">[*]HOME[*]Classifica[*]Coppa[*]Giornate[*]Rose[*]Discussioni[/list]</div> </div> <div id="content"><div class=mainCentre> <div class=boxHead> <div class=boxLeft> <h2>Formazione Team: Della & Teo</h2> </div> <div class=boxRight></div> </div> <div class=boxBody> <div class=dropform> <div class=lista> <h3>Portieri</h3><div class=drag><div data-value='EDER Citadin martins' title='Difensore' draggable=true class=player>EDER Citadin martins</div></div><div class=drag><div data-value='PAZZINI Giampaolo' title='Difensore' draggable=true class=player>PAZZINI Giampaolo</div></div><div class=drag><div data-value='MUTU Adrian' title='Difensore' draggable=true class=player>MUTU Adrian</div></div><h3>Difensori</h3><div class=drag><div data-value='DENIS German' title='Difensore' draggable=true class=player>DENIS German</div></div><div class=drag><div data-value='BORRIELLO Marco' title='Difensore' draggable=true class=player>BORRIELLO Marco</div></div><div class=drag><div data-value='BOJINOV Valeri' title='Difensore' draggable=true class=player>BOJINOV Valeri</div></div><div class=drag><div data-value='PALACIO Rodrigo' title='Difensore' draggable=true class=player>PALACIO Rodrigo</div></div><div class=drag><div data-value='MARTINEZ Jorge Andres' title='Difensore' draggable=true class=player>MARTINEZ Jorge A.</div></div><div class=drag><div data-value='MARCHISIO Claudio' title='Difensore' draggable=true class=player>MARCHISIO Claudio</div></div><div class=drag><div data-value='GUBERTI Stefano' title='Difensore' draggable=true class=player>GUBERTI Stefano</div></div><div class=drag><div data-value='GOMEZ Alejandro' title='Difensore' draggable=true class=player>GOMEZ Alejandro</div></div><h3>Centrocampisti</h3><div class=drag><div data-value='GIACCHERINI Emanuele' title='Difensore' draggable=true class=player>GIACCHERINI Emanuele</div></div><div class=drag><div data-value='CONTI Daniele' title='Difensore' draggable=true class=player>CONTI Daniele</div></div><div class=drag><div data-value='CAMBIASSO Esteban Matias' title='Difensore' draggable=true class=player>CAMBIASSO Esteban M.</div></div><div class=drag><div data-value='MOTTA Marco' title='Difensore' draggable=true class=player>MOTTA Marco</div></div><div class=drag><div data-value='GAMBERINI Alessandro' title='Difensore' draggable=true class=player>GAMBERINI Alessandro</div></div><div class=drag><div data-value='DIAS Andre' title='Difensore' draggable=true class=player>DIAS Andre</div></div><div class=drag><div data-value='CHIVU Cristian' title='Difensore' draggable=true class=player>CHIVU Cristian</div></div><div class=drag><div data-value='CESAR Bostjan' title='Difensore' draggable=true class=player>CESAR Bostjan</div></div><h3>Attaccanti</h3><div class=drag><div data-value='CECCARELLI Luca' title='Difensore' draggable=true class=player>CECCARELLI Luca</div></div><div class=drag><div data-value='CANNAVARO Paolo' title='Difensore' draggable=true class=player>CANNAVARO Paolo</div></div><div class=drag><div data-value='ANTONINI Luca' title='Difensore' draggable=true class=player>ANTONINI Luca</div></div><div class=drag><div data-value='ANTONIOLI Francesco' title='Difensore' draggable=true class=player>ANTONIOLI Francesco</div></div><div class=drag><div data-value='AMELIA Marco' title='Difensore' draggable=true class=player>AMELIA Marco</div></div><div class=drag><div data-value='ABBIATI Christian' title='Difensore' draggable=true class=player>ABBIATI Christian</div></div> </div> <div id="field"> <div id="0" class="zonep"></div> <div id="1" class="zonedc"></div><div id="2" class="zonedc"></div><div id="3" class="zonedc"></div><div id="4" class="zonedc"></div><div id="5" class="zonedc"></div> <div id="6" class="zonedc"></div><div id="7" class="zonedc"></div><div id="8" class="zonedc"></div><div id="9" class="zonedc"></div><div id="10" class="zonedc"></div> <div id="11" class="zonea"></div><div id="12" class="zonea"></div><div id="13" class="zonea"></div> <div id="14" class="zoner"></div><div id="15" class="zoner"></div><div id="16" class="zoner"></div><div id="17" class="zoner"></div> <div id="18" class="zonea"></div><div id="19" class="zonea"></div><div id="20" class="zonea"></div> </div> </div> </div> <div class=boxFooter> <div class=boxLeft></div> <div class=boxRight></div> <div align=right></div> </div> </div> </div> <div align="center" id="bottom"> <div align="center" id="footer"> © Compagni di merende 2010 − Web design & develop by DellaeMme </div> </div> <div align="center">
</div> </div> </body> </html>
Rispondi quotando