drag and drop - the elements don't drop

Question

i'm making a drag and drop quiz here's the full code

 <!doctype html>
    <html>
    <head>

    <title>A jQuery Drag-and-Drop quiz</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
    <script type="text/javascript">

    var correctCards = 0;
    $( init );

    function init() {

      // Hide the success message
      $('#successMessage').hide();
      $('#successMessage').css( {
        left: '580px',
        top: '250px',
        width: 0,
        height: 0
      } );

      // Reset the game
      correctCards = 0;
      $('#cardPile').html( '' );
      $('#cardSlots').html( '' );

      // Create the pile of shuffled cards
       var numbers = ["A","B","C"];


  numbers.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<3; i++ ) {
    $('<div>' + "<img src = \"" + numbers [i]  + ".gif\" width = \"105\" height = \"100\" />"+ '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }

      // Create the card slots
      var words = [ 'A', 'B', 'C'];
      for ( var i=1; i<=3; i++ ) {
        $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
          accept: '#cardPile div',
          hoverClass: 'hovered',
          drop: handleCardDrop
        } );
      }

    }

    function handleCardDrop( event, ui ) {
      var slotNumber = $(this).data( 'number' );
      var cardNumber = ui.draggable.data( 'number' );

      // If the card was dropped to the correct slot,
      // change the card colour, position it directly
      // on top of the slot, and prevent it being dragged
      // again

      if ( slotNumber == cardNumber ) {
        ui.draggable.addClass( 'correct' );
        ui.draggable.draggable( 'disable' );
        $(this).droppable( 'disable' );
        ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
        ui.draggable.draggable( 'option', 'revert', false );
        correctCards++;
      } 

      // If all the cards have been placed correctly then display a message
      // and reset the cards for another go

      if ( correctCards == 3 ) {
        $('#successMessage').show();
        $('#successMessage').animate( {
          left: '380px',
          top: '200px',
          width: '400px',
          height: '100px',
          opacity: 1
        } );
      }

    }

    </script>

    </head>
    <body>

    <div class="wideBox">
      <h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
      <h2>A Number Cards Game</h2>
    </div>

    <div id="content">

      <div id="cardPile"> </div>
      <div id="cardSlots"> </div>

      <div id="successMessage">
        <h2>You did it!</h2>
        <button onclick="init()">Play Again</button>
      </div>

    </div>

    </body>
    </html>

originally in the numbers array used to be numbers and it was working fine but then when i changed the numbers into pictures, i'm able to drag them but i'm not able to drop in the right place, like .. they are dragable but not dropable ! i didn't touch the code i only changed the array and the loop to show the pictures, anyone have any idea what to do, please ?

this is the style.css file

/* Main content area */


.wideBox {
  clear: both;
  text-align: center;
  margin: 70px;
  padding: 10px;
  background: #ebedf2;
  border: 1px solid #333;
}



/* Slots for final card positions */

#cardSlots {
  margin: 50px auto 0 auto;
  background: #ddf;
}

/* The initial pile of unsorted cards */

#cardPile {
  margin: 0 auto;
  background: #ffd;
}

#cardSlots, #cardPile {
  width: 910px;
  height: 120px;
  padding: 20px;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
}

/* Individual cards and slots */

#cardSlots div, #cardPile div {
  float: left;
  width: 58px;
  height: 78px;
  padding: 10px;
  padding-top: 40px;
  padding-bottom: 0;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 0 0 0 10px;
  background: #fff;
}

#cardSlots div:first-child, #cardPile div:first-child {
  margin-left: 0;
}

#cardSlots div.hovered {
  background: #aaa;
}

#cardSlots div {
  border-style: dashed;
}

#cardPile div {
  background: #666;
  color: #fff;
  font-size: 50px;
  text-shadow: 0 0 3px #000;
}

#cardPile div.ui-draggable-dragging {
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
}

/* Individually coloured cards */

#card1.correct { background: red; }
#card2.correct { background: brown; }
#card3.correct { background: orange; }
#card4.correct { background: yellow; }
#card5.correct { background: green; }
#card6.correct { background: cyan; }
#card7.correct { background: blue; }
#card8.correct { background: indigo; }
#card9.correct { background: purple; }
#card10.correct { background: violet; }


/* "You did it!" message */
#successMessage {
  position: absolute;
  left: 580px;
  top: 250px;
  width: 0;
  height: 0;
  z-index: 100;
  background: #dfd;
  border: 2px solid #333;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
  padding: 20px;
}

the code is originally for 10 elements in an array please help

@j08691 that's what i found, and the code was exactly for the same thing i wanted but then i have this problem. — Dee994, Feb 22 '16 at 16:24

score 0 · Answer 1 · answered Feb 23 '16 at 07:10

well, i've found an answer, if someone is gonna need this code you just need to edit

function handleCardDrop( event, ui ) {
      var slotNumber = $(this).data( 'string' );
      var cardNumber = ui.draggable.data( 'string' );

this way it will detect the strings :) have a nice day

score 0 · Answer 2 · answered Jan 30 '17 at 05:18

    <!doctype html>
    <html lang="en">
    <head>

    <title>A jQuery Drag-and-Drop Card Game</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./jquery-ui.min.js"></script>
    <script type="text/javascript">

    var correctCards = 0;
    $( init );

    function init() {

      // Hide the success message
      $('#successMessage').hide();
      $('#successMessage').css( {
        left: '580px',
        top: '250px',
        width: 0,
        height: 0
      } );

      // Reset the game
      correctCards = 0;
      $('#cardPile').html( '' );
      $('#cardSlots').html( '' );

      <!-- this shows how many cards -->
      // Create the pile of shuffled cards
      var numbers = [ 'a','b','c','d'];
      numbers.sort( function() { return Math.random() - .2 } );

    <!-- Note make sure you name your cards a.gif, b.gif, c.gif, d.gif -->
      for ( var i=0; i<4; i++ ) {
          $('<div>' + "<img src = \"" + numbers [i]  + ".gif\" width =\"60\"height = \"100\" />"+ '</div>').data( 'string', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
          containment: '#content',
          stack: '#cardPile div',
          cursor: 'move',
          revert: true
        } );
      }

      // Create the card slots
      var words = [ 'a', 'b', 'c', 'd'];
      for ( var i=1; i<=4; i++ ) {
        $('<div>' + words[i-1] + '</div>').data( 'string', words[i-1] ).appendTo( '#cardSlots' ).droppable( {
          accept: '#cardPile div',
          hoverClass: 'hovered',
          drop: handleCardDrop
        } );
      }

    }

      function handleCardDrop( event, ui ) {
          var slotNumber = $(this).data( 'string' );
          var cardNumber = ui.draggable.data( 'string' );

      // If the card was dropped to the correct slot,
      // change the card colour, position it directly
      // on top of the slot, and prevent it being dragged
      // again

      if ( slotNumber == cardNumber ) {
        ui.draggable.addClass( 'correct' );
        ui.draggable.draggable( 'disable' );
        $(this).droppable( 'disable' );
        ui.draggable.position( { of: $(this), my: 'left top', at: 'left top'   } );
        ui.draggable.draggable( 'option', 'revert', false );
        correctCards++;
      } 

      // If all the cards have been placed correctly then display a message
      // and reset the cards for another go

      if ( correctCards == 4 ) {
        $('#successMessage').show();
        $('#successMessage').animate( {
          left: '380px',
          top: '200px',
          width: '400px',
          height: '100px',
          opacity: 1
        } );
      }

    }

    </script>

    </head>
    <body>

    <div class="wideBox">
      <h1>Drag-and-Drop with jQuery</h1>
      <h2>Card Game</h2>
    </div>

    <div id="content">

      <div id="cardPile"> </div>
      <div id="cardSlots"> </div>

      <div id="successMessage">
        <h2>You did it!</h2>
        <button onclick="init()">Play Again</button>
      </div>

    </body>
    </html>

Please add notes explaining how your code solves the problem. — codeforester, Jan 30 '17 at 05:38
I too have been working on this problem for weeks thanks to Dee994 code I fixed the game I been working on and added notes to help explaining this problem; Number cards to Pictures cards. Make sure you name your cards a.gif, b.gif, c.gif, d.gif and put them in the same Folder as cardgame.html and style.css Now I'm working on adding sound to a card that has been clicked on. — Glenda Webb, Jan 30 '17 at 08:43

score 0 · Answer 3 · answered Jan 30 '17 at 06:49

    /* style.css */
    /* This game works in Chrome */
    /* Add some margin to the page and set a default font and colour */

    body {
      margin: 30px;
      font-family: "Georgia", serif;
      line-height: 1.8em;
      color: #333;
    }

    /* Give headings their own font */

    h1, h2, h3, h4 {
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }

    /* Main content area */

    #content {
      margin: 80px 70px;
      text-align: center;
      -moz-user-select: none;
      -webkit-user-select: none;
      user-select: none;
    }
    /* Header/footer boxes */

    .wideBox {
      clear: both;
     text-align: center;
      margin: 70px;
      padding: 10px;
      background: #ebedf2;
      border: 1px solid #333;
    }

    .wideBox h1 {
      font-weight: bold;
      margin: 20px;
      color: #666;
      font-size: 1.5em;
    }

    /* Slots for final card positions */

    #cardSlots {
      margin: 50px auto 0 auto;
      background: #ddf;
    }

    /* The initial pile of unsorted cards */

    #cardPile {
      margin: 0 auto;
      background: #ffd;
    }

    #cardPile {
      width: 360px;
      height: 120px;
      padding: 20px;
      border: 2px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
      -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
      box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
    }
    #cardSlots {
     width: 360px;
      height: 120px;
      padding: 20px;
      border: 2px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
      -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
      box-shadow: 0 0 .3em rgba(0, 0, 0, .8);
    }

    /* Individual cards and slots */

    #cardPile div {
      float: left;
      width: 58px;
      height: 78px;
      padding: 10px;
      padding-top: 5px;
      padding-bottom: 34px;
      border: 2px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      margin: 0 0 0 10px;
      background: #fff;
    }

    #cardSlots div {
      float: left;
      width: 58px;
      height: 78px;
      padding: 10px;
      padding-top: 40px;
      padding-bottom: 0;
      border: 2px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      margin: 0 0 0 10px;
      background: #fff;
    }
    #cardSlots div:first-child {
      margin-left: 0;
    }

    #cardPile div:first-child {
      margin-left: 0;
    }

    #cardSlots div.hovered {
      background: #aaa;
    }

    #cardSlots div {
      border-style: dashed;
      background: #666;
      font-size: 50px; 
    }
    #cardPile div {
      background: red;  
      color: #fff;
      font-size: 50px; 
      text-shadow: 0 0 3px #000;
    }

    #cardPile div.ui-draggable-dragging {
      -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
      -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
      box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
    }

    }
    /* Individually coloured cards */
    /* Note carda will not turn to a new colour */

    #carda.correct { background: blue; }
    #cardb.correct { background: green; }
    #cardc.correct { background: orange; }
    #cardd.correct { background: yellow; }


    /* "You did it!" message */
    #successMessage {
      position: absolute;
      left: 580px;
      top: 250px;
      width: 0;
     height: 0;
      z-index: 100;
      background: #dfd;
      border: 2px solid #333;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      -moz-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
      -webkit-box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
      box-shadow: .3em .3em .5em rgba(0, 0, 0, .8);
      padding: 20px;
    }

I think this answer also require some explanation – Gaurav Rai Jan 30 '17 at 07:14 — Gaurav Rai, Jan 30 '17 at 07:14
Anyone know why Card a will not turn to a new colour. – Glenda Webb Jan 30 '17 at 09:03 — Glenda Webb, Jan 30 '17 at 09:03

drag and drop - the elements don't drop

3 Answers3

Linked