match.html

<style>
    body { 
    margin: 0;
}
.card { 
    width: 75px; 
    border:1px solid #ccc;
    background-color: #eaeaea;
    height: 75px;
    display: inline-block;
}
.stack {
    width: 75px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    display: inline-block;
}
.stackHdr {
    background-color: #eaeaea;
    border: 1px solid #fff;
    padding: 5px 
}
.stackDrop1, .stackDrop2, .stackDrop3, .stackDrop4, .stackDrop5, .stackDrop6{
    height: 75px;
}
</style>

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

  <script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<!-- throw this in later -->
<!-- https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js -->

<div id="launchPad">    
    <div class="card">
        apple
    </div> 
    <div class="card">
        orange
    </div> 
    <div class="card">
        banana
    </div> 
    <div class="card">
        car
    </div> 
    <div class="card">
        bus
    </div> 
    <div class="card">
        House
    </div> 
</div>

<div id="dropZone">
    <div class="stack">
        <div class="stackDrop1"></div>
    </div>
    
    <div class="stack">
        <div class="stackDrop2"></div>
    </div>
    
    <div class="stack">
        <div class="stackDrop3"></div>
    </div>
    
    <div class="stack">
        <div class="stackDrop4"></div>
    </div>
    
    <div class="stack">
        <div class="stackDrop5"></div>
    </div>
    
    <div class="stack">
        <div class="stackDrop6"></div>
    </div>
</div>

<script>
    jQuery( document ).ready(function() {
    jQuery(".card").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    revert: "invalid"
});

jQuery("#launchPad").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        jQuery("#launchPad").append(jQuery(ui.draggable));
    }
});

jQuery(".stackDrop1").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        if (jQuery('.stackDrop1').is(':empty')){
            jQuery(this).append(jQuery(ui.draggable));
        }
    }
});

jQuery(".stackDrop2").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        if (jQuery('.stackDrop2').is(':empty')){
            jQuery(this).append(jQuery(ui.draggable));
        }
    }
});

jQuery(".stackDrop3").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        if (jQuery('.stackDrop3').is(':empty')){
            jQuery(this).append(jQuery(ui.draggable));
        }
    }
});

jQuery(".stackDrop4").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        if (jQuery('.stackDrop4').is(':empty')){
            jQuery(this).append(jQuery(ui.draggable));
        }
    }
});

jQuery(".stackDrop5").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        if (jQuery('.stackDrop5').is(':empty')){
            jQuery(this).append(jQuery(ui.draggable));
        }
    }
});

jQuery(".stackDrop6").droppable({
    tolerance: "intersect",
    accept: ".card",
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {        
        if (jQuery('.stackDrop6').is(':empty')){
            jQuery(this).append(jQuery(ui.draggable));
        }
    }
});
    });
</script>