jQuery: 'class=ui.dragable' Not Being Applied to Whole Array

NiceBench
October 19, 2022
132 views
0 votes
2 Answers

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--;
}

Answers

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>

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 class="cards"></div>
<div class="drop"></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.

Please signup or login to give your own answer.

Click here to cancel reply.