JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<ul id="items">
    <li>Bananas</li>
    <li>Apples</li>
    <li>Grapes</li>
    <li>Oranges</li>
    <li>Watermelon</li>
    <li>Strawberries</li>
</ul>
<div id="cart">
    Cart - <span id="count">0</span> Item(s)
</div>

CSS

#items { list-style: none; }
#items li {
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid black;
    border-radius: 5px;
    width: 100px;
    cursor: move;
}
#cart { 
    position: fixed;
    top: 0;
    right: 0;
    height: 55px;
    width: 150px;
    border: 2px solid black;
    text-align: center;
    padding-top: 20px;
    line-height: 10px;
    box-sizing: border-box;
}
#cart.active {
    border: 2px dotted black;
}
#cart.hover {
    opacity: 0.5;
}

JavaScript

$( "#items li" ).draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone"
});
$( "#cart" ).droppable({
    activeClass: "active",
    hoverClass: "hover",
    drop: function( event, ui ) {
        var count = parseInt( $( "#count" ).text(), 10 );
        $( "#count" ).text( ++count );
    },
    tolerance: "touch"
});