title: card game drag and drop
body: <blockquote>
    <p>Can someone play this game and explain to me why the <code>.correct.length</code> class in line 102 is equal to 1?. I put an alert box on it to confirm the length. 
    Here is a working fiddle <a href="http://jsfiddle.net/6haMV/141/" rel="nofollow">http://jsfiddle.net/6haMV/141/</a></p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(init);
  
  function init() {
  
    $('#element_1').data('number', 1).attr('id', 'card' + 1).draggable({
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'pointer',
      revert: true
  
    });
  
    $('#element_2').data('number', 2).attr('id', 'card' + 2).draggable({
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'pointer',
      revert: true
    });
  
    $('#element_3').data('number', 3).attr('id', 'card' + 3).draggable({
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'pointer',
      revert: true
    });
  
    $('#element_4').data('number', 4).attr('id', 'card' + 4).draggable({
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'pointer',
      revert: true
    });
  
    $('#element_5').data('number', 5).attr('id', 'card' + 5).draggable({
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'pointer',
      revert: true
    });
  
    $('#element_6').data('number', 6).attr('id', 'card' + 6).draggable({
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'pointer',
      revert: true
    });
  
  
    $('#slot_1').data('number', 1).droppable({
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
  
    });
  
    $('#slot_2').data('number', 2).droppable({
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    });
  
    $('#slot_3').data('number', 3).droppable({
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    });
  
    $('#slot_4').data('number', 4).droppable({
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    });
  
    $('#slot_5').data('number', 5).droppable({
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    });
  
    $('#slot_6').data('number', 6).droppable({
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    });
  
  }
  
  var totalCards = $('#cardPile').children().length;
  var totalMatches = 0;
  
  function handleCardDrop(event, ui) {
    var slotNumber = $(this).data('number');
    var cardNumber = ui.draggable.data('number');
  
    if (slotNumber == cardNumber) {
      totalMatches++;
      ui.draggable.addClass('correct');
      ui.draggable.draggable('disable');
      alert("the .correct length is " + $(".correct").length);
      $(this).droppable('disable');
      ui.draggable.position({
        of: $(this),
        my: 'left top',
        at: 'left top'
      });
      ui.draggable.draggable('option', 'revert', false);
    }
  
    if (totalMatches == totalCards) {
      $('#basicModal').modal('show');
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset"utf-8";
  
  /* CSS Document */
  
  body {
    margin: 30px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.8em;
    color: #333;
  }
  #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;
  }
  #cardSlots {
    margin: 50px auto 0 auto;
  }
  #cardPile {
    margin: 0 auto;
  }
  #cardPile {
    width: 1200px;
    height: 120px;
    padding: 20px;
  }
  #cardSlots {
    width: 1200px;
    height: 1000px;
    padding: 20px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: normal;
  }
  #cardSlots div,
  #cardPile div {
    float: left;
    width: 80px;
    height: 50px;
    padding: 10px;
    padding-bottom: 0;
    border: 1px 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: 1px dashed #333;
  }
  #cardPile div {
    background: #fff;
    border: 1px solid #005575;
    color: #000;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.3;
  }
  #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);
  }
  #card1.correct {
    background: #5fcf80;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="content" class="content"&gt;
    &lt;!-- Modal --&gt;
  
    &lt;div id="cardPile"&gt;
      &lt;div id="element_1"&gt;Card 1&lt;/div&gt;
      &lt;div id="element_2"&gt;Card 2&lt;/div&gt;
      &lt;div id="element_3"&gt;Card 3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="cardSlots"&gt;
      &lt;div id="slot_1"&gt;&lt;/div&gt;
      &lt;div id="slot_2"&gt;&lt;/div&gt;
      &lt;div id="slot_3"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!--Modal--&gt;
  &lt;div class="modal fade" id="textModal"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title" style="text-align:center"&gt;Great Work!&lt;/h4&gt;
  
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;Everything was matched :)&lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;a href="www.google.com"&gt;
            &lt;button type="button" class="btn btn-primary"&gt;Next&lt;/button&gt;
          &lt;/a&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>