jquery drag+drop - js global variables issue
I want people to rank three factors via the jquery drag and drop plugin. 
To catch the first, second and third place, respectively, I defined javascript variables (factor1, factor2, factor3) which take the value of the id of the dropped factor, as soon as it is dropped.

Now, if one drops the factors to the third, second and first place, in that order, all works fine, that is, all variables have the id's of the dropped elements. 

The problem is, if one drops the factors in any other order, say first, second and third place, the variables factor1 and factor2 are empty again, although the dropped element still is on the droppable area. 

Any help or comment is gladly appreciated. Thanks. 

Here's my code:
  

    <script type='text/javascript'>
     var factor1 = '';
	var factor2 = '';
	var factor3 = '';
     </script>


    <script type='text/javascript'>


    $(function() {






		$( ".draggablefactor" ).draggable({ 
		
		
		revert: "invalid",
		
		cursor: "pointer",
		
	 		drag: function( ) {
				
			//some CSS code to highlight droppable areas

			},

			stop: function( ) {
				
			//some css code to stop highlighting

			


			},

	


		});

                //this is the droppable area for the first-ranked factor

		$( "#factordrop1" ).droppable({

		accept: ".draggablefactor",


			drop: function(event,ui)
				{


                 //this is where factor1 gets the id of the dropped factor
	
        	factor1 = $(ui.draggable).attr("id"); 
		
		

		
	
		
				},

		//dragging away!

		out: function(event,ui)
				{




				

				//make variable empty if dragged out
				factor1 = '';

				
				
				},







		});
		
                //this is the droppable area for the second-ranked factor

		$( "#factordrop2" ).droppable({

		accept: ".draggablefactor",








			drop: function(event,ui)
				{


                      //this is where factor2 gets the id of the dropped factor
	
        	factor2 = $(ui.draggable).attr("id"); 
		
		

		
	
		
				},

		//dragging away!

		out: function(event,ui)
				{




				

				//make variable empty if dragged out
				factor2 = '';

				
				
				},







		});

                 //this is the droppable area for the third-ranked factor

		$( "#factordrop3" ).droppable({

		accept: ".draggablefactor",


			drop: function(event,ui)
				{

                    //this is where factor3 gets the id of the dropped factor
	
        	factor3 = $(ui.draggable).attr("id"); 
		
		

		
	
		
				},

		//dragging away!

		out: function(event,ui)
				{




				

				//make variable empty if dragged out
				factor3 = '';

				
				
				},







		});
		
		$( "#factordropback" ).droppable({

		accept: ".draggablefactor",

		});
			






		

		
		
				


		
	});

       </script>


Thanks for your help. Matt
   
jquery drag+drop - js global variables issue
===

I want people to rank three factors via the jquery drag and drop plugin. 
To catch the first, second and third place, respectively, I defined javascript variables (factor1, factor2, factor3) which take the value of the id of the dropped factor, as soon as it is dropped.

Now, if one drops the factors to the third, second and first place, in that order, all works fine, that is, all variables have the id's of the dropped elements. 

The problem is, if one drops the factors in any other order, say first, second and third place, the variables factor1 and factor2 are empty again, although the dropped element still is on the droppable area. 

Any help or comment is gladly appreciated. Thanks. 

Here's my code:
  

    <script type='text/javascript'>
     var factor1 = '';
	var factor2 = '';
	var factor3 = '';
     </script>


    <script type='text/javascript'>


    $(function() {






		$( ".draggablefactor" ).draggable({ 
		
		
		revert: "invalid",
		
		cursor: "pointer",
		
	 		drag: function( ) {
				
			//some CSS code to highlight droppable areas

			},

			stop: function( ) {
				
			//some css code to stop highlighting

			


			},

	


		});

                //this is the droppable area for the first-ranked factor

		$( "#factordrop1" ).droppable({

		accept: ".draggablefactor",


			drop: function(event,ui)
				{


                 //this is where factor1 gets the id of the dropped factor
	
        	factor1 = $(ui.draggable).attr("id"); 
		
		

		
	
		
				},

		//dragging away!

		out: function(event,ui)
				{




				

				//make variable empty if dragged out
				factor1 = '';

				
				
				},







		});
		
                //this is the droppable area for the second-ranked factor

		$( "#factordrop2" ).droppable({

		accept: ".draggablefactor",








			drop: function(event,ui)
				{


                      //this is where factor2 gets the id of the dropped factor
	
        	factor2 = $(ui.draggable).attr("id"); 
		
		

		
	
		
				},

		//dragging away!

		out: function(event,ui)
				{




				

				//make variable empty if dragged out
				factor2 = '';

				
				
				},







		});

                 //this is the droppable area for the third-ranked factor

		$( "#factordrop3" ).droppable({

		accept: ".draggablefactor",


			drop: function(event,ui)
				{

                    //this is where factor3 gets the id of the dropped factor
	
        	factor3 = $(ui.draggable).attr("id"); 
		
		

		
	
		
				},

		//dragging away!

		out: function(event,ui)
				{




				

				//make variable empty if dragged out
				factor3 = '';

				
				
				},







		});
		
		$( "#factordropback" ).droppable({

		accept: ".draggablefactor",

		});
			






		

		
		
				


		
	});

       </script>


Thanks for your help. Matt
   