Home > Software engineering >  jQuery: 'class=ui.dragable' Not Being Applied to Whole Array
jQuery: 'class=ui.dragable' Not Being Applied to Whole Array

Time：10-20

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.

Page link：https//www.codepudding.com/Softwareengineering/582221.html

Prev:method cannot be applied to given types when trying to perform a generic binary search
Next:Implementation detail inheritance?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding