aiuto jquery: draggable & droppable

S

surferbloggy

Nuovo Utente
21 Feb 2010
3
0
0
ciao, sto facendo uno script jquery che dovrebbe funzionare cosi:
quando clicco un pulsante clono una riga di elementi grafici (div con bg immagine) e ne creo un'altra riga
poi a destra ho una serie di altri elementi grafici colorati da trascinare verso gli elementi dell'ultima riga generata
in modo che questi elementi cambiano colore al rilascio e memorizzo il numero del colore in un array

solo che funziona male nel senso che per cambiare il colore degli elementi dell'ultima riga generata devo trascinarli sulla prima
insomma dovrei cambiare il colore all'elemento con cui ho la collisione, invece questo non avviene e per cambiare l'ultima riga devo toccare gli elementi della prima riga
è come se il droppable trova il numero di riga non aggiornato e quindi per cambiare la riga 3 devo fare il drag'n'drop sulla 1

questo è il codice della funzione che richiamo al click del pulsante per generare le righe la funzione contirene anche il droppable che ripeto per ogni elemento della riga (che sono 7 per ogni riga) e faccio tornare i 12 colori al loro posto quindi è un po lungo, ancora non ho capito dove' l'errore
mi date un aiuto???

Codice: 
$('.newatt').click(function() {
			  
			  
			  			//////////////////
						
					var idparent=$(this).parent().attr("id");
					if(idparent.length==6){
							var bid= idparent.slice(-1);
						}else{
							var bid= idparent.slice(-2);
						}
						nid=Number(bid)+1;
					
					alert(nid);
				
				row++;
				
				var rr=row-1;
				$('#idrow1').clone(true).attr('id', 'idrow'+ row).insertAfter("#idrow"+rr);
				
				
				$('#idrow'+row+" div").each(function(){
    				$(this).css({'background':'transparent url(assets/images/can3Dwhite.png) no-repeat 0 0'});	
					$('.newatt').css({'background':'transparent url(assets/images/can3Dblack.png) no-repeat 0 0'});
				});
				
				
				
				//////////////////
				
				
				var arrATT=new Array(); 
				
				switch(formulasize)
				{
				case 5:
					arrATT[row]=[0,0,0,0,0];
					
  					
  				break;
				case 6:
					arrATT[row]=[0,0,0,0,0,0];
  					
  				break;
				case 7:
					arrATT[row]=[0,0,0,0,0,0,0];
  					
  				break;
				default:
  					arrATT[row]=[0,0,0,0,0];
					
				}
				
				//alert(row);
				
				
				
				/////////////
				for (var i=1;i<=12;i++){
				
				$("#gc"+i).draggable({
   					 cursor: 'move',          // sets the cursor apperance
    				 revert: 'invalid',       // makes the item to return if it isn't placed into droppable
    				 revertDuration: 100,     // duration while the item returns to its place
    				 opacity: 1 ,
					           // opacity while the element is dragged
					drag: function(event, ui) {

					}
  					});
				}
				
				//////////////////////////////////////////
				
					$( nid+" .c01").droppable({
					
   					 drop: function(event, ui) {
						 
						
						
						
						var a= $(ui.draggable).attr("id");
						if(a.length==3){
							var b= a.slice(-1);
						}else{
							var b= a.slice(-2);
						}
						
						
						
						
						$( nid+" .c01").css({'background':'transparent url(assets/images/can3D'+b+'.png) no-repeat 0 0'});
						
						
						
						arrATT[row][1]=b;
						alert(arrATT[row][1]);
						
						
						$("#gc1").animate({'left':'0','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'0', 'opacity':'1'});

						});
						$("#gc2").animate({'left':'45','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'0', 'opacity':'1'});

						});
						$("#gc3").animate({'left':'80','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'0', 'opacity':'1'});

						});
						$("#gc4").animate({'left':'0','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'130', 'opacity':'1'});

						});
						$("#gc5").animate({'left':'45','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'130', 'opacity':'1'});

						});
						$("#gc6").animate({'left':'80','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'130', 'opacity':'1'});

						});
						$("#gc7").animate({'left':'0','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'260', 'opacity':'1'});

						});
						$("#gc8").animate({'left':'45','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'260', 'opacity':'1'});

						});
						$("#gc9").animate({'left':'80','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'260', 'opacity':'1'});

						});
						$("#gc10").animate({'left':'0','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'395', 'opacity':'1'});

						});
						$("#gc11").animate({'left':'45','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'395', 'opacity':'1'});

						});
						$("#gc12").animate({'left':'80','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'395', 'opacity':'1'});

						});
						
						
						
						
						
						
    				}
 					});
				
				
				//////////////////////////////////////////
				
				
				//////////////////////////////////////////
				
				
					
					$( nid+" .c02").droppable({
   					 drop: function(event, ui) {
						 
						
					
						
						var a= $(ui.draggable).attr("id");
						if(a.length==3){
							var b= a.slice(-1);
						}else{
							var b= a.slice(-2);
						}
						
						
						
						$( nid+" .c02").css({'background':'transparent url(assets/images/can3D'+b+'.png) no-repeat 0 0'});
						
						
						arrATT[row][2]=b;
						alert(arrATT[row][2]);
						
						$("#gc1").animate({'left':'0','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'0', 'opacity':'1'});

						});
						$("#gc2").animate({'left':'45','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'0', 'opacity':'1'});

						});
						$("#gc3").animate({'left':'80','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'0', 'opacity':'1'});

						});
						$("#gc4").animate({'left':'0','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'130', 'opacity':'1'});

						});
						$("#gc5").animate({'left':'45','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'130', 'opacity':'1'});

						});
						$("#gc6").animate({'left':'80','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'130', 'opacity':'1'});

						});
						$("#gc7").animate({'left':'0','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'260', 'opacity':'1'});

						});
						$("#gc8").animate({'left':'45','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'260', 'opacity':'1'});

						});
						$("#gc9").animate({'left':'80','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'260', 'opacity':'1'});

						});
						$("#gc10").animate({'left':'0','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'395', 'opacity':'1'});

						});
						$("#gc11").animate({'left':'45','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'395', 'opacity':'1'});

						});
						$("#gc12").animate({'left':'80','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'395', 'opacity':'1'});

						});
						
						
						
						
						
						
    				}
 					});
				
				
				//////////////////////////////////////////
				
				//////////////////////////////////////////
				
					$( nid+" .c03").droppable({
   					 drop: function(event, ui) {
						 
						
					
						
						var a= $(ui.draggable).attr("id");
						if(a.length==3){
							var b= a.slice(-1);
						}else{
							var b= a.slice(-2);
						}
						
						
						
						$( nid+" .c03").css({'background':'transparent url(assets/images/can3D'+b+'.png) no-repeat 0 0'});
						
						
						arrATT[row][3]=b;
						alert(arrATT[row][3]);
						
						$("#gc1").animate({'left':'0','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'0', 'opacity':'1'});

						});
						$("#gc2").animate({'left':'45','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'0', 'opacity':'1'});

						});
						$("#gc3").animate({'left':'80','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'0', 'opacity':'1'});

						});
						$("#gc4").animate({'left':'0','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'130', 'opacity':'1'});

						});
						$("#gc5").animate({'left':'45','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'130', 'opacity':'1'});

						});
						$("#gc6").animate({'left':'80','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'130', 'opacity':'1'});

						});
						$("#gc7").animate({'left':'0','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'260', 'opacity':'1'});

						});
						$("#gc8").animate({'left':'45','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'260', 'opacity':'1'});

						});
						$("#gc9").animate({'left':'80','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'260', 'opacity':'1'});

						});
						$("#gc10").animate({'left':'0','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'395', 'opacity':'1'});

						});
						$("#gc11").animate({'left':'45','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'395', 'opacity':'1'});

						});
						$("#gc12").animate({'left':'80','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'395', 'opacity':'1'});

						});
						
						
						
						
						
						
						
    				}
 					});
				
				
				//////////////////////////////////////////
				
				
				//////////////////////////////////////////
				
					$( nid+" .c04").droppable({
   					 drop: function(event, ui) {
						 
						
					
						
						var a= $(ui.draggable).attr("id");
						if(a.length==3){
							var b= a.slice(-1);
						}else{
							var b= a.slice(-2);
						}
						
						
						
						$( nid+" .c04").css({'background':'transparent url(assets/images/can3D'+b+'.png) no-repeat 0 0'});
						
						
						arrATT[row][4]=b;
						alert(arrATT[row][4]);
						
						$("#gc1").animate({'left':'0','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'0', 'opacity':'1'});

						});
						$("#gc2").animate({'left':'45','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'0', 'opacity':'1'});

						});
						$("#gc3").animate({'left':'80','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'0', 'opacity':'1'});

						});
						$("#gc4").animate({'left':'0','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'130', 'opacity':'1'});

						});
						$("#gc5").animate({'left':'45','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'130', 'opacity':'1'});

						});
						$("#gc6").animate({'left':'80','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'130', 'opacity':'1'});

						});
						$("#gc7").animate({'left':'0','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'260', 'opacity':'1'});

						});
						$("#gc8").animate({'left':'45','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'260', 'opacity':'1'});

						});
						$("#gc9").animate({'left':'80','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'260', 'opacity':'1'});

						});
						$("#gc10").animate({'left':'0','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'395', 'opacity':'1'});

						});
						$("#gc11").animate({'left':'45','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'395', 'opacity':'1'});

						});
						$("#gc12").animate({'left':'80','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'395', 'opacity':'1'});

						});
						
						
						
						
						
						
						
    				}
 					});
				
				
				//////////////////////////////////////////
				
				//////////////////////////////////////////
				
					$( nid+" .c05").droppable({
   					 drop: function(event, ui) {
						 
						
					
						
						var a= $(ui.draggable).attr("id");
						if(a.length==3){
							var b= a.slice(-1);
						}else{
							var b= a.slice(-2);
						}
						
						
						
						$( nid+" .c05").css({'background':'transparent url(assets/images/can3D'+b+'.png) no-repeat 0 0'});
						
						arrATT[row][5]=b;
						alert(arrATT[row][5]);
						
						$("#gc1").animate({'left':'0','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'0', 'opacity':'1'});

						});
						$("#gc2").animate({'left':'45','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'0', 'opacity':'1'});

						});
						$("#gc3").animate({'left':'80','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'0', 'opacity':'1'});

						});
						$("#gc4").animate({'left':'0','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'130', 'opacity':'1'});

						});
						$("#gc5").animate({'left':'45','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'130', 'opacity':'1'});

						});
						$("#gc6").animate({'left':'80','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'130', 'opacity':'1'});

						});
						$("#gc7").animate({'left':'0','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'260', 'opacity':'1'});

						});
						$("#gc8").animate({'left':'45','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'260', 'opacity':'1'});

						});
						$("#gc9").animate({'left':'80','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'260', 'opacity':'1'});

						});
						$("#gc10").animate({'left':'0','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'395', 'opacity':'1'});

						});
						$("#gc11").animate({'left':'45','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'395', 'opacity':'1'});

						});
						$("#gc12").animate({'left':'80','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'395', 'opacity':'1'});

						});
						
						
						
						
						
						
						
						
						
    				}
 					});
				
				
				//////////////////////////////////////////
				
				
				//////////////////////////////////////////
				
					$( nid+" .c06").droppable({
   					 drop: function(event, ui) {
						 
						
					
						
						var a= $(ui.draggable).attr("id");
						if(a.length==3){
							var b= a.slice(-1);
						}else{
							var b= a.slice(-2);
						}
						
						
						
						$( nid+" .c06").css({'background':'transparent url(assets/images/can3D'+b+'.png) no-repeat 0 0'});
						
						
						arrATT[row][6]=b;
						alert(arrATT[row][6]);
						
						$("#gc1").animate({'left':'0','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'0', 'opacity':'1'});

						});
						$("#gc2").animate({'left':'45','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'0', 'opacity':'1'});

						});
						$("#gc3").animate({'left':'80','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'0', 'opacity':'1'});

						});
						$("#gc4").animate({'left':'0','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'130', 'opacity':'1'});

						});
						$("#gc5").animate({'left':'45','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'130', 'opacity':'1'});

						});
						$("#gc6").animate({'left':'80','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'130', 'opacity':'1'});

						});
						$("#gc7").animate({'left':'0','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'260', 'opacity':'1'});

						});
						$("#gc8").animate({'left':'45','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'260', 'opacity':'1'});

						});
						$("#gc9").animate({'left':'80','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'260', 'opacity':'1'});

						});
						$("#gc10").animate({'left':'0','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'395', 'opacity':'1'});

						});
						$("#gc11").animate({'left':'45','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'395', 'opacity':'1'});

						});
						$("#gc12").animate({'left':'80','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'395', 'opacity':'1'});

						});
						
						
						
						
						
						
						
						
    				}
 					});
				
				
				//////////////////////////////////////////
				
				
				//////////////////////////////////////////
				
					$( nid+" .c07").droppable({
   					 drop: function(event, ui) {
						 
						
					
						
						var a= $(ui.draggable).attr("id");
						if(a.length==3){
							var b= a.slice(-1);
						}else{
							var b= a.slice(-2);
						}
						
						
						
						$( nid+" .c07").css({'background':'transparent url(assets/images/can3D'+b+'.png) no-repeat 0 0'});
						
						
						arrATT[row][7]=b;
						alert(arrATT[row][7]);
						
						$("#gc1").animate({'left':'0','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'0', 'opacity':'1'});

						});
						$("#gc2").animate({'left':'45','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'0', 'opacity':'1'});

						});
						$("#gc3").animate({'left':'80','top':'0','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'0', 'opacity':'1'});

						});
						$("#gc4").animate({'left':'0','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'130', 'opacity':'1'});

						});
						$("#gc5").animate({'left':'45','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'130', 'opacity':'1'});

						});
						$("#gc6").animate({'left':'80','top':'130','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'130', 'opacity':'1'});

						});
						$("#gc7").animate({'left':'0','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'260', 'opacity':'1'});

						});
						$("#gc8").animate({'left':'45','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'260', 'opacity':'1'});

						});
						$("#gc9").animate({'left':'80','top':'260','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'260', 'opacity':'1'});

						});
						$("#gc10").animate({'left':'0','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'0','top':'395', 'opacity':'1'});

						});
						$("#gc11").animate({'left':'45','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'45','top':'395', 'opacity':'1'});

						});
						$("#gc12").animate({'left':'80','top':'395','opacity':'1'}, 100, function(){

    						$(this).css({'left':'80','top':'395', 'opacity':'1'});

						});
						
						
						
						
						
						
						
						
						
    				}
 					});
				
				
				//////////////////////////////////////////
			 
			  
		   });
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

T
aiuto per trasformare un quiz fatto in JS in un quiz in JQUERY
Risposte
0
Visite
3K
jQuery
theseo
T
claudio_lorenzo
[Javascript] aiuto su jquery per calcolo altezze dom
Risposte
1
Visite
1K
Javascript
Tommy03
Tommy03
R
Aiuto Jquery
Risposte
1
Visite
1K
jQuery
jonnino2004
jonnino2004
J
Aiuto per localstorage con jquery/js/json
Risposte
4
Visite
2K
Javascript
criric
criric
E
Aiuto per Sviluppo app Eclipse + Phonegap + Jquery
Risposte
1
Visite
2K
Sviluppo app per Android
michelep
michelep
L
  • Bloccata
verifica mail in db con jquery e ajax. Aiuto
Risposte
9
Visite
6K
jQuery
alessandro1997
alessandro1997
S
jquery plugin per vedere foto e video problemi aiuto
Risposte
0
Visite
1K
jQuery
shivi
S
V
[JQuery] Aiuto per funzione Ajax
Risposte
0
Visite
2K
jQuery
valerione
V
N
JQuery slideToggle Aiuto
Risposte
0
Visite
2K
jQuery
natspace
N
X
aiuto funzione jquery
Risposte
1
Visite
2K
jQuery
xxxstefanoxxx
X
I
Aiuto Jquery: finta finestra popup
Risposte
1
Visite
5K
jQuery
ivanisevic82
I
R
Aiuto PhpMyAdmin OVHcloud
Risposte
0
Visite
2K
Hosting
RobertaG
R
E
Aiuto per query
Risposte
8
Visite
3K
PHP
marino51
marino51
R
Aiuto ripristino sito web
Risposte
0
Visite
306
Presentati al Forum
rosama
R
L
Aiuto con DataGridView
Risposte
1
Visite
2K
Visual Basic
LucaCesana
L
F
Aiuto! cambio immagine di sfondo al cambio pagina
Risposte
2
Visite
1K
HTML e CSS
Fabrizio5778
F
I
aiuto urgente per thunderbird
Risposte
0
Visite
1K
Posta Elettronica
ilprincipiante
I
I
aiuto per outlook
Risposte
0
Visite
1K
Posta Elettronica
ilprincipiante
I
D
  • Bloccata
aiuto funzioni javascript
Risposte
1
Visite
880
Javascript
Max 1
Max 1
D
Aiuto CSS in ELEMENTOR - Cambiare un testo
Risposte
0
Visite
1K
CMS (Content Management System)
doppiadi
D
Alto Basso