I am currently trying to develop a prototype using jQuery that makes a whole stack of cards draggable within the window once dealt. I am noticing that the entire stack is not getting the class=ui.draggable
property within my console on my website. I am not sure as to why only some of these cards within the array would be getting the property seemingly at random each time. Would appreciate any feedback on this!
$('#deal').click(function () {
dealCard(randomCard());
});
$( function init() {
$(".drop").droppable( { drop: dropCard } );
} );
function dropCard(event, ui) {
$('#drop').html( 'The card "' ui.draggable.attr('id') '" was dropped.' );
}
var cardsInDeck = new Array();
var numberOfCardsInDeck = 51;
cardsInDeck[0] = "ClubAce";
cardsInDeck[1] = "Clubs2";
cardsInDeck[2] = "Clubs3";
cardsInDeck[3] = "Clubs4";
cardsInDeck[4] = "Clubs5";
cardsInDeck[5] = "Clubs6";
cardsInDeck[6] = "Clubs7";
cardsInDeck[7] = "Clubs8";
cardsInDeck[8] = "Clubs9";
cardsInDeck[9] = "Clubs10";
cardsInDeck[10] = "ClubsJack";
cardsInDeck[11] = "ClubsKing";
cardsInDeck[12] = "ClubsQueen";
cardsInDeck[13] = "DiamondsAce";
cardsInDeck[14] = "Diamonds2";
cardsInDeck[15] = "Diamonds3";
cardsInDeck[16] = "Diamonds4";
cardsInDeck[17] = "Diamonds5";
cardsInDeck[18] = "Diamonds6";
cardsInDeck[19] = "Diamonds7";
cardsInDeck[20] = "Diamonds8";
cardsInDeck[21] = "Diamonds9";
cardsInDeck[22] = "Diamonds10";
cardsInDeck[23] = "DiamondsQueen";
cardsInDeck[24] = "DiamondsJack";
cardsInDeck[25] = "DiamondsKing";
cardsInDeck[26] = "HeartsAce";
cardsInDeck[27] = "Hearts2";
cardsInDeck[28] = "Hearts3";
cardsInDeck[29] = "Hearts4";
cardsInDeck[30] = "Hearts5";
cardsInDeck[31] = "Hearts6";
cardsInDeck[32] = "Hearts7";
cardsInDeck[33] = "Hearts8";
cardsInDeck[34] = "Hearts9";
cardsInDeck[35] = "Hearts10";
cardsInDeck[36] = "HeartsJack";
cardsInDeck[37] = "HeartsKing";
cardsInDeck[38] = "HeartsQueen";
cardsInDeck[39] = "SpadesAce";
cardsInDeck[40] = "Spades2";
cardsInDeck[41] = "Spades3";
cardsInDeck[42] = "Spades4";
cardsInDeck[43] = "Spades5";
cardsInDeck[44] = "Spades6";
cardsInDeck[45] = "Spades7";
cardsInDeck[46] = "Spades8";
cardsInDeck[47] = "Spades9";
cardsInDeck[48] = "Spades10";
cardsInDeck[49] = "SpadesJack";
cardsInDeck[50] = "SpadesQueen";
cardsInDeck[51] = "SpadesKing";
function dealCard(i) {
if (numberOfCardsInDeck === 0) return false;
var img = document.createElement("img");
img.setAttribute("id", cardsInDeck[i]);
img.setAttribute("height", "100px");
img.src ="../Cards/" cardsInDeck[i] ".png";
document.body.appendChild(img);
console.log(cardsInDeck[i]);
removeCard(i);
$("#" cardsInDeck[i]).draggable({ containment: 'document' });
}
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);
}
function removeCard(c)
{
for (j=c; j <= numberOfCardsInDeck - 2; j )
{
cardsInDeck[j] = cardsInDeck[j 1];
}
numberOfCardsInDeck--;
}
CodePudding user response:
Consider this part of your snippet:
function dealCard(i) {
if (numberOfCardsInDeck === 0) return false;
var img = document.createElement("img");
img.setAttribute("id", cardsInDeck[i]);
img.setAttribute("height", "100px");
img.src ="../Cards/" cardsInDeck[i] ".png";
document.body.appendChild(img);
removeCard(i);
$("#" cardsInDeck[i]).draggable({ containment: 'document' });
}
Within dealCard()
, when you call removeCard(i)
(second last line), it changes the content of cardsInDeck
. Because of this change, when you use cardsInDeck
in the next (last) line you don't always get the correct id.
Possible fixes: store the id
(cardsInDeck[i]
) before calling removeCard(i)
and use it later. Alternatively, you can just swap the two bottom lines making removeCard(i)
the last.
Demo:
$('#deal').click(function () {
dealCard(randomCard());
});
$( function init() {
$(".drop").droppable( { drop: dropCard } );
} );
function dropCard(event, ui) {
$('#drop').html( 'The card "' ui.draggable.attr('id') '" was dropped.' );
}
var cardsInDeck = new Array();
var numberOfCardsInDeck = 51;
cardsInDeck[0] = "ClubAce";
cardsInDeck[1] = "Clubs2";
cardsInDeck[2] = "Clubs3";
cardsInDeck[3] = "Clubs4";
cardsInDeck[4] = "Clubs5";
cardsInDeck[5] = "Clubs6";
cardsInDeck[6] = "Clubs7";
cardsInDeck[7] = "Clubs8";
cardsInDeck[8] = "Clubs9";
cardsInDeck[9] = "Clubs10";
cardsInDeck[10] = "ClubsJack";
cardsInDeck[11] = "ClubsKing";
cardsInDeck[12] = "ClubsQueen";
cardsInDeck[13] = "DiamondsAce";
cardsInDeck[14] = "Diamonds2";
cardsInDeck[15] = "Diamonds3";
cardsInDeck[16] = "Diamonds4";
cardsInDeck[17] = "Diamonds5";
cardsInDeck[18] = "Diamonds6";
cardsInDeck[19] = "Diamonds7";
cardsInDeck[20] = "Diamonds8";
cardsInDeck[21] = "Diamonds9";
cardsInDeck[22] = "Diamonds10";
cardsInDeck[23] = "DiamondsQueen";
cardsInDeck[24] = "DiamondsJack";
cardsInDeck[25] = "DiamondsKing";
cardsInDeck[26] = "HeartsAce";
cardsInDeck[27] = "Hearts2";
cardsInDeck[28] = "Hearts3";
cardsInDeck[29] = "Hearts4";
cardsInDeck[30] = "Hearts5";
cardsInDeck[31] = "Hearts6";
cardsInDeck[32] = "Hearts7";
cardsInDeck[33] = "Hearts8";
cardsInDeck[34] = "Hearts9";
cardsInDeck[35] = "Hearts10";
cardsInDeck[36] = "HeartsJack";
cardsInDeck[37] = "HeartsKing";
cardsInDeck[38] = "HeartsQueen";
cardsInDeck[39] = "SpadesAce";
cardsInDeck[40] = "Spades2";
cardsInDeck[41] = "Spades3";
cardsInDeck[42] = "Spades4";
cardsInDeck[43] = "Spades5";
cardsInDeck[44] = "Spades6";
cardsInDeck[45] = "Spades7";
cardsInDeck[46] = "Spades8";
cardsInDeck[47] = "Spades9";
cardsInDeck[48] = "Spades10";
cardsInDeck[49] = "SpadesJack";
cardsInDeck[50] = "SpadesQueen";
cardsInDeck[51] = "SpadesKing";
function dealCard(i) {
if (numberOfCardsInDeck === 0) return false;
var img = document.createElement("img");
img.setAttribute("id", cardsInDeck[i]);
img.setAttribute("height", "100px");
img.src ="../Cards/" cardsInDeck[i] ".png";
img.title=cardsInDeck[i];
document.body.appendChild(img);
$("#" cardsInDeck[i]).draggable({ containment: 'document' }); // <------- changed the order here
removeCard(i); // <------- changed the order here
}
function randomCard() {
return Math.floor(Math.random() * numberOfCardsInDeck);
}
function removeCard(c)
{
for (j=c; j <= numberOfCardsInDeck - 2; j )
{
cardsInDeck[j] = cardsInDeck[j 1];
}
numberOfCardsInDeck--;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<button id="deal">DEAL</button>
<hr>
CodePudding user response:
Consider the following.
$(function() {
var cards = [{
label: "♣A",
suit: "Clubs",
name: "Ace"
},
{
label: "♣2",
suit: "Clubs",
name: "Two"
},
{
label: "♣3",
suit: "Clubs",
name: "Three"
},
{
label: "♣4",
suit: "Clubs",
name: "Four"
},
{
label: "♣5",
suit: "Clubs",
name: "Five"
},
{
label: "♣6",
suit: "Clubs",
name: "Six"
},
{
label: "♣7",
suit: "Clubs",
name: "Seven"
},
{
label: "♣8",
suit: "Clubs",
name: "Eight"
},
{
label: "♣9",
suit: "Clubs",
name: "Nine"
},
{
label: "♣10",
suit: "Clubs",
name: "Ten"
},
{
label: "♣J",
suit: "Clubs",
name: "Jack"
},
{
label: "♣Q",
suit: "Clubs",
name: "Queen"
},
{
label: "♣K",
suit: "Clubs",
name: "King"
},
{
label: "♦A",
suit: "Diamonds",
name: "Ace"
},
{
label: "♦2",
suit: "Diamonds",
name: "Two"
},
{
label: "♦3",
suit: "Diamonds",
name: "Three"
},
{
label: "♦4",
suit: "Diamonds",
name: "Four"
},
{
label: "♦5",
suit: "Diamonds",
name: "Five"
},
{
label: "♦6",
suit: "Diamonds",
name: "Six"
},
{
label: "♦7",
suit: "Diamonds",
name: "Seven"
},
{
label: "♦8",
suit: "Diamonds",
name: "Eight"
},
{
label: "♦9",
suit: "Diamonds",
name: "Nine"
},
{
label: "♦10",
suit: "Diamonds",
name: "Ten"
},
{
label: "♦J",
suit: "Diamonds",
name: "Jack"
},
{
label: "♦Q",
suit: "Diamonds",
name: "Queen"
},
{
label: "♦K",
suit: "Diamonds",
name: "King"
},
{
label: "♥A",
suit: "Hearts",
name: "Ace"
},
{
label: "♥2",
suit: "Hearts",
name: "Two"
},
{
label: "♥3",
suit: "Hearts",
name: "Three"
},
{
label: "♥4",
suit: "Hearts",
name: "Four"
},
{
label: "♥5",
suit: "Hearts",
name: "Five"
},
{
label: "♥6",
suit: "Hearts",
name: "Six"
},
{
label: "♥7",
suit: "Hearts",
name: "Seven"
},
{
label: "♥8",
suit: "Hearts",
name: "Eight"
},
{
label: "♥9",
suit: "Hearts",
name: "Nine"
},
{
label: "♥10",
suit: "Hearts",
name: "Ten"
},
{
label: "♥J",
suit: "Hearts",
name: "Jack"
},
{
label: "♥Q",
suit: "Hearts",
name: "Queen"
},
{
label: "♥K",
suit: "Hearts",
name: "King"
},
{
label: "♠A",
suit: "Spades",
name: "Ace"
},
{
label: "♠2",
suit: "Spades",
name: "Two"
},
{
label: "♠3",
suit: "Spades",
name: "Three"
},
{
label: "♠4",
ssuit: "Spades",
name: "Four"
},
{
label: "♠5",
suit: "Spades",
name: "Five"
},
{
label: "♠6",
suit: "Spades",
name: "Six"
},
{
label: "♠7",
suit: "Spades",
name: "Seven"
},
{
label: "♠8",
suit: "Spades",
name: "Eight"
},
{
label: "♠9",
suit: "Spades",
name: "Nine"
},
{
label: "♠10",
suit: "Spades",
name: "Ten"
},
{
label: "♠J",
suit: "Spades",
name: "Jack"
},
{
label: "♠Q",
suit: "Spades",
name: "Queen"
},
{
label: "♠K",
suit: "Spades",
name: "King"
}
];
function makeDeck(shuffle) {
if (shuffle == undefined) {
shuffle = false;
}
var deck = [];
if (shuffle) {
console.log("Shuffling");
var myCards = cards.map((x) => x);
var card;
for (var i = 0; i < 52; i ) {
var ind = Math.floor(myCards.length * Math.random());
card = myCards[ind];
deck.push(card);
myCards.splice(ind, 1);
}
} else {
deck.push(myCards);
}
return deck;
}
function dropCard(event, ui) {
$(this).html(ui.draggable.attr('title') ' was dropped.');
}
var cardsInDeck = makeDeck(true);
function dealCard() {
if (cardsInDeck.length === 0) return false;
var card = cardsInDeck.pop();
var img = $("<img>", {
id: card.suit card.name,
class: "card",
src: "https://dummyimage.com/150 x 200/eeeeee/000000.png&text=" card.label,
title: card.name " of " card.suit
}).css({
"border-radius": "6px",
height: "100px"
}).appendTo(".cards").draggable({
revert: "invalid",
containment: 'document'
});
console.log("Card Dealt", card.label);
}
function init() {
$(".drop").droppable({
accept: ".card",
drop: dropCard
});
}
init();
$('#deal').click(function() {
dealCard();
});
});
.drop {
width: 150px;
height: 200px;
background: #cfc;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css">
<button id="deal">DEAL</button>
<hr>
<div ></div>
<div ></div>
This is an example that is a bit more complex, yet the same basic apply.
function dealCard() {
if (cardsInDeck.length === 0) return false;
var card = cardsInDeck.pop();
var img = $("<img>", {
id: card.suit card.name,
class: "card",
src: "https://dummyimage.com/150 x 200/eeeeee/000000.png&text=" card.label,
title: card.name " of " card.suit
}).css({
"border-radius": "6px",
height: "100px"
}).appendTo(".cards").draggable({
revert: "invalid",
containment: 'document'
});
console.log("Card Dealt", card.label);
}
This pulls a Card object from the top of the deck (using .pop()
). A new <img>
element is created with specific attributes. It is appended to the document and made draggable.
The User can now drag it. Droppable must be configured correctly too.