Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy looping and drag and drop

    I am trying to loop through each area and checking if they match the image class number then it should drop in correct place. You can see that i commented out the loop and if statement because it doesn't work. Can anyone shine light on this because i'm frustrated with this issue.

    Code:
    $(document).ready(function(){
       
             var images = $('#clothes').find('img');
             var drop = $('#dress').find('area');
    
            for(var a=0; a < images.length; a++){
                  $( images[a] ).draggable( );
                        //alert($(images[i]).hasClass("20"));
                        if($(images[a]).hasClass("20")){
                            $( images[a] ).draggable({ revert: 'valid' });
                            //alert("WRONG");
                        }
                       
                        else{
                            $( images[a] ).draggable({ revert: 'invalid' });
                              }
                   
                    /*for(var b=0; b < drop.length; b++){
                         $( drop[k]).droppable({
                                activeClass: "ui-state-hover",
                                hoverClass: "ui-state-active",
                                drop: function( event, ui ) {
                                    $( this ).addClass( "ui-state-highlight" )
                                   
                                    /*if($(images[a]).attr('class').split(" ")[0] == $(drop[b]).attr('class')){
                                        alert("RIGHT");
                                        $(images[a]).draggable({ revert: 'invalid' });
                                       
                                    }
                                    else if($(images[a]).hasClass("20")){
                                        $( images[a] ).draggable({ revert: 'valid' });
                                    }
                        //alert("a = " + $(images[a]).attr('class').split(" ")[0] + " b = " + $(drop[b]).attr('class'));
                                   
                                }
                        });
                    }*/
              }
             
             
              
               
            });

  • #2
    Regular Coder
    Join Date
    Apr 2005
    Location
    Texas
    Posts
    448
    Thanks
    24
    Thanked 63 Times in 63 Posts
    Before I go any further into your sample, I would like to point out a possible error
    Code:
    /*for(var b=0; b < drop.length; b++){
                         $( drop[k]).droppable({
    Allwisend bin ich nicht, doch viel ist mir bewursst
    -Goethe

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, that was embarrassing. I must have changed the code several times and forgot to change the variable. I must have forgot to posted the updated code. I changed some of my codes.

    However i am still having this issue. Perhaps my logic for this is wrong.

    Code:
    	$(document).ready(function(){
    	
    	var images = $('#clothes').find('img');
             var drop = $('#dress').find('area');
    
            for(var a=0; a < images.length; a++){
                  $( images[a] ).draggable( );
                        //alert($(images[i]).hasClass("20"));
                        if($(images[a]).hasClass("20")){
                            $( images[a] ).draggable({ revert: 'valid' });
                            //alert("WRONG");
                        }
                       
                        else{
                            //$( images[a] ).draggable({ revert: 'invalid' });
    						//alert("a = " + $(images[a]).attr('class').split(" ")[0]);
                              
                   
    						for(var k=0; k < drop.length; k++){
    							
    							
    							 $( drop[k]).droppable({
    									activeClass: "ui-state-hover",
    									hoverClass: "ui-state-active",
    									drop: function( event, ui ) {
    										//$( this ).addClass( "ui-state-highlight" )
    									   
    										//alert("a = " + $(images[a]).attr('class').split(" ")[0] + " k = " + $(drop[k]).attr('class').split(" ")[0]);
    										if($(images[a]).attr('class').split(" ")[0] == $(drop[k]).attr('class').split(" ")[0]){
    											alert("RIGHT");
    											//$(images[a]).draggable({ revert: 'invalid' });
    													   
    										}
    										 /* else if($(images[a]).hasClass("20")){
    											$( images[a] ).draggable({ revert: 'valid' });
    										}*/
    								   
    									}
    							});
    						}
    					}
              }
    		  
    		  
    		  /*for(var b=0; b<drop.length; b++){
    			  $( drop[b]).droppable({
    					activeClass: "ui-state-hover",
    					hoverClass: "ui-state-active",
    					drop: function( event, ui ) {
    						$( this ).addClass( "ui-state-highlight" )
    						
    							
    					}
    				});
    		  }*/
    			
    		});
    Last edited by joserinu; 02-28-2012 at 04:16 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •