JSFiddle - React, Tailwind, and code Playground

by writetobhuwan

HTML

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<body>
    <section id="topbar">
        <?php echo 'Welcome, ' . $row_userdets[ 'forename'] . ' ' . $row_userdets[ 'surname']; ?>. <a href="<?php echo $logoutAction ?>">Click to Logout.</a>

    </section>
    
<h1 class="header">Our products</h1>

    <div class="cart">
        <div id="cartHeader">
            
<h2 class="header">Shopping Cart</h2>
Drag product here to add to your cart</div>
        <div class="cart-content">
            <ol class="cartlist"></ol>
        </div>
        <div>
            <p class="total">Total: £0</p>
        </div>
    </div>
<a href="#" class="item"> 
<div class="product">
<img src="images/PioneerDJM2000Nexus.jpg" class="prodimg">
<p class="id">001</p>
<p class= "prodtitle">Pioneer DJM 2000 Nexus</p>
<p class = "price">£1999</p>
<p>Advanced performance high-end DJ mixer for pro DJs and clubs.</p>
</div>
</a>

</body>

</html>

CSS

[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
}
.product {
    width: 60%;
    text-align: left;
    border:1px solid #CCC;
}
.prodimg {
    float: left;
    padding: 3px 3px 0px 3px;
}
.cart {
    float:right;
    background-color:#ccc;
    width:25%;
    padding:0 5%;
    height:100%;
}
#price {
    text-align: right;
}
#cartHeader {
    text-align: center;
    border:1px solid #F63
}
.total {
    margin:0;
    text-align:right;
    padding-right:20px;
}

JavaScript

$(document).ready(function () {
    var total = 0;
    $('.product').draggable({
        revert: true,
        proxy: 'clone',
        onStartDrag: function () {
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index', 10);
        },
        onStopDrag: function () {
            $(this).draggable('options').cursor = 'move';
        }
    });

    $('.cart').droppable({
        onDrop: function (e, source) {
            var name = $(source).find('.prodtitle').text();
            var price = $(source).find('.price').text();
            var id = $(source).find('.id').text();
            var priceNum = parseFloat(price.split('£')[1])
            var itemHtml = 0;
            if (document.getElementById(id) == null) {
                itemHtml = '<li class="cartItem" + id="' + id + '>1x ' + name + ' - ' + price + '</li>';
                $('.cartlist').append(itemHtml);
            } else {
                var curr = parseInt($('#' + id).text().substring(0, 1));
                curr++;
                itemHtml = '<li class="cartItem" + id="' + id + '>' + curr + 'x ' + name + ' - ' + price + '</li>';
                $('#' + id).html(itemHtml);
            }

            total += pricenum;
            $('.total').text("£" + total);

        }
    });


});