dinasity Posted October 22, 2014 Share Posted October 22, 2014 Hello Everyone, I'm trying to drag the cards that I "Deal", but nothing is happening. I'm not sure what I'm doing wrong... HTML::: <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="cards.css" rel="stylesheet" type="text/css" /><title> Card Game </title><script type='text/javascript' src='http://ajax.microsoft.com/ajax/jQuery/jquery-2.0.2.js'></script><script type='text/javascript' src="./jquery-ui.js"></script><script type="text/javascript"> $(document).ready(function () {$('#deal').click(function () { dealCard(randomCard());});var cardsInDeck = new Array();var numberOfCardsInDeck = 52;cardsInDeck[0] = "2_of_clubs";cardsInDeck[1] = "8_of_hearts";cardsInDeck[2] = "king_of_diamonds";cardsInDeck[3] = "queen_of_spades2";cardsInDeck[4] = "8_of_diamonds";cardsInDeck[5] = "queen_of_hearts2";cardsInDeck[6] = "ace_of_hearts";cardsInDeck[7] = "8_of_clubs";cardsInDeck[8] = "10_of_spades";cardsInDeck[9] = "jack_of_spades2";cardsInDeck[10] = "3_of_spades";cardsInDeck[11] = "5_of_hearts";cardsInDeck[12] = "king_of_clubs2";cardsInDeck[13] = "6_of_hearts";cardsInDeck[14] = "2_of_diamonds";cardsInDeck[15] = "8_of_spades";cardsInDeck[16] = "2_of_hearts";cardsInDeck[17] = "9_of_clubs";cardsInDeck[18] = "2_of_spades";cardsInDeck[19] = "9_of_diamonds";cardsInDeck[20] = "3_of_clubs";cardsInDeck[21] = "9_of_hearts";cardsInDeck[22] = "3_of_diamonds";cardsInDeck[23] = "9_of_spades";cardsInDeck[24] = "3_of_hearts";cardsInDeck[25] = "10_of_clubs";cardsInDeck[26] = "4_of_clubs";cardsInDeck[27] = "10_of_diamonds";cardsInDeck[28] = "10_of_hearts";cardsInDeck[29] = "4_of_diamonds";cardsInDeck[30] = "ace_of_clubs";cardsInDeck[31] = "4_of_spades";cardsInDeck[32] = "ace_of_diamonds";cardsInDeck[33] = "5_of_clubs";cardsInDeck[34] = "ace_of_spades";cardsInDeck[35] = "5_of_diamonds";cardsInDeck[36] = "5_of_hearts";cardsInDeck[37] = "jack_of_clubs2";cardsInDeck[38] = "5_of_spades";cardsInDeck[39] = "jack_of_diamonds2";cardsInDeck[40] = "6_of_clubs";cardsInDeck[41] = "jack_of_hearts2";cardsInDeck[42] = "6_of_diamonds";cardsInDeck[43] = "jack_of_spades2";cardsInDeck[44] = "6_of_hearts";cardsInDeck[45] = "king_of_hearts2";cardsInDeck[46] = "7_of_clubs";cardsInDeck[47] = "king_of_spades2";cardsInDeck[48] = "7_of_diamonds";cardsInDeck[49] = "queen_of_clubs2";cardsInDeck[50] = "7_of_spades";cardsInDeck[51] = "queen_of_diamonds2";cardsInDeck[52] = "queen_of_hearts2";function dealCard(i) { if (numberOfCardsInDeck == 0) return false; var img = document.createElement("img"); img.src = "https://lackeyinnovations.azurewebsites.net/Cards/" + cardsInDeck[i] + ".png"; document.body.appendChild(img); removeCard(i);}function randomCard() { return Math.floor(Math.random() * numberOfCardsInDeck); }function removeCard(c){ // simply make every higher numbered card move down 1 for (j=c; j <= numberOfCardsInDeck - 2; j++) { cardsInDeck[j] = cardsInDeck[j+1]; } numberOfCardsInDeck--;} });function init() { $('.drop').droppable( { drop: handleDropEvent } ); }function dealCard() { var img = document.createElement("img"); img.src = 'https://lackeyinnovations.azurewebsites.net/Cards/'; img.id = 'ace_of_hearts'; document.body.appendChild(img); $('#ace_of_hearts').draggable();}function handleDropEvent( event, ui ) { var draggable = ui.draggable; $('#drop').html( 'The "' + draggable.attr('id') + '" Was Discarded Here!' ); }</script></head> <body> <center><a href="">JS Fiddle Link</a></center> <br/><br/> <input type="button" value="Deal Card" id="deal" /> <br/> <br/> <br/> <br/> <br/> <div id='drop' class='drop'><strong><center>Discard Here:</center></strong></div></body></html> CSS::: body {background-color: #c0c0c0; font-family: Arial, Helvetica, sans-serif}.drop { float: inherit; width: 600px; height: 200px; background-color: #494775; image-orientation: initial; }img{ width: 80px; height: 120px;}p {text-indent: 0.0em}#imgcntr{ text-align: center; padding: 16px; border-image-source: url(./Cards);}.drop { float: center; width: 400px; height: 200px; background-color: #808080;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now