JSFiddle - React, Tailwind, and code Playground

by Ron Eaglin

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="auto-style1">
    <input type="button" value="Deal Card" id="deal" />
</div>
<div class="cardarea" id="cardarea"></div>
<div id="discard" class="cardarea discard"></div>

CSS

div.cardarea {
    border-radius: 15px;
    border: 1px solid black;
    margin-top: 10px;
    text-align:center;
    min-width: 400px;
    padding: 10px;
}
.discard {
    line-height: 140px;
    height: 140px;
    color:white;
}
div.cardarea > span {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 1em;
}
div.cardarea .card {
    height: 120px;
    box-shadow: 2px 2px 15px -2px;
    margin: 5px;
}

JavaScript

$(init); // Initialize Drop Elements

$('#deal').click(function() {
    alert("Click");
});

function init() {
   $('.discard').droppable({
        drop: handleDropEvent
    });
}


function handleDropEvent(event, ui) {
    var draggable = ui.draggable;
    $('#drop').html('The square with ID "' + draggable.attr('id') + '" was dropped onto me!');
    document.body.removeChild
}