Need to get draggable elements stack up correctly

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
drayarms
Forum Contributor
Posts: 134
Joined: Fri Dec 31, 2010 5:11 pm

Need to get draggable elements stack up correctly

Post by drayarms »

Im trying to create a simple card game. I thought it would be much easier to just show provide a url to the game rather than create a fiddle to mimick the problem I'm facing. Here is the link below.
http://mygeneric.info/cards/check.html#play_ac



Enter a number in the text box between 1 and 26, ideally between 6 and 8 and click on Shuffle cards. That takes you to to play area. the design is still very rudimentary at this stage because I'm focused on the programing. So far everythig works as planned execpt when it comes to stacking the cards dealt on top of each other. The two functions below computer_play (automatic) and drag_me (manually triggerd by player) handle the computer and player's turn to deal a card respectively. A function which I will not include here, switches the turn to play between the computer and the player. The play_turn variable below, is incremented by a value of 1 every time play is switched between the player and computer. i then use this value to determine the z-index of the card dealt, so that each card dealt appears above the others. Well the cards dealt by the computer always appear below those dealt by the computer regardless of their z index position. Is there any way one can fix this? I must admit I'm still quite new with the Draggable/droppable plugin. I've done my best to explain the functions below within the comments. Hopefully it's easy to follow.


Code: Select all


var play_turn = 0; //This variable will be incremented within the computer play and player play functions below so that each time a card is dealt by either side, it gets a new higher value. We will use it to determine the z-index position for the card dealt


				//Define computer play function

				function computer_play(){ 


					//Determine the possible cards to play and place them in an array

		
						//I'm ommitting the code because it is rather cumbersome and unrelated to this
						//problem but it leads to the generation of the card_to_play_index variable used below to determine the card which will be dealt by the computer 




						//Assign the image of card to play to a variable

						var card_img = $("#p1front").children().eq(card_to_play_index);

						play_turn++; 

						



						//Place card to play in board 1 container, the green rectangle in the center where the cards are dropped

						card_img.appendTo("#board1_container");

						card_img.css("position","absolute");



						card_img.animate({"z-index":play_turn},10); //This is supposed to palce the card dealt by the computer into board 1 container and stacks it above all the others




				}//End of computer play function





				//Define player play function

				function drag_me(){ //The player play function, trigggered by dragging any of the cards in the player's box, the rectangle at the bottom

					$('#player2_container > .p2cards').draggable({//Player 2 container is the rectangle containing the player's cards, all the cards in this container are assigned to class p2cards and rendered draggable

    						containment: '#player2_cards',

    						cursor: 'move',

      						revert: true


					});


					$('#board1_container').droppable({ //Board1 container where both the computer's cards and player's cards area dealt, is made droppable so that player's cards can be dropped within

     						accept: '#player2_container img',  

						drop: handle_card_drop

					});





				}//End drag me


				$(drag_me);





				function handle_card_drop(event,ui){//Defines the drop handle_card_drop function function parsed in the droppable method above


 


					ui.draggable.draggable('disable');



    					ui.draggable.draggable('option', 'revert', false);


					play_turn++; 

					ui.draggable.animate({"z-index":play_turn},10); 




					//Run the whose turn function recursively, this time handing the baton to the computer

					play_first = "computer";

					whose_turn(play_first); //It's now computer's turn






				}//End handle card drop

Post Reply