JSFiddle - React, Tailwind, and code Playground

by rity

HTML

<link rel="stylesheet" href="http://www.jeasyui.com/easyui/demo/demo.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<div id="Totalheading">Total Products In Cart =  </div> 
<span id="Total" style="font-weight:bold;">0</span>

<ul class="products">
        <li class="item">
                <img src="http://cdn.macrumors.com/article/2010/09/03/145454-itunes_10_icon.jpg"/>
                <div>
                    <p>Balloon</p>
                    <p>Price:$25</p>
                </div>
                <button class="add-to-cart">Add</button>
        </li>
        <li class="item">
                <img src="http://cdn.macrumors.com/article/2010/09/03/145454-itunes_10_icon.jpg"/>
                <div>
                    <p>Feeling</p>
                    <p>Price:$25</p>
                </div>
                <button class="add-to-cart">Add</button>
 
        </li>
        <li class="item">

                <img src="http://cdn.macrumors.com/article/2010/09/03/145454-itunes_10_icon.jpg"/>
                <div>
                    <p>Elephant</p>
                    <p>Price:$25</p>
                </div>
                <button class="add-to-cart">Add</button>

        </li>
        <li class="item">

                <img src="http://cdn.macrumors.com/article/2010/09/03/145454-itunes_10_icon.jpg"/>
                <div>
                    <p>Stamps</p>
                    <p>Price:$25</p>
                </div>
           
        </li>
        <li class="item">

                <img src="http://cdn.macrumors.com/article/2010/09/03/145454-itunes_10_icon.jpg"/>
                <div>
                    <p>Monogram</p>
                    <p>Price:$25</p>
                </div>
 ...

CSS

.products{
            list-style:none;
            margin:0;
            margin-right:300px;
            padding:0px;
            height:100%;
    z-index: 10;
        }
        .products li{
            display:inline;
            float:left;
            margin:10px;
        }
        .item{
            display:block;
            text-decoration:none;
        }
        .item img{
            border:1px solid #333; width: 20px; height: 20px
        }
        .item p{
            margin:0;
            font-weight:bold;
            text-align:center;
            color:#c3c3c3;
        }
        .cart{
            position:fixed;
            right:0;
            top:0;
            width:300px;
            height:100%;
            background:#ccc;
            padding:0px 10px;
    z-index: 0;
        }
        h1{
            text-align:center;
            color:#555;
            font-size:18px;
        }
        h2{
            position:absolute;
            font-size:16px;
            left:10px;
            bottom:20px;
            color:#555;
        }
        .total{
            margin:0;
            text-align:right;
            padding-right:20px;
        }

JavaScript

var data = {
    "total": 0,
    "rows": []
};

var totalCost = 0;

var viewModel = {
    cartItems: ko.observableArray(),
    deleteItem: function() {
        viewModel.cartItems.remove(this);
        var rowCount = document.getElementById("cartcontent1").getElementsByTagName("TR").length;
        document.getElementById("Total").innerHTML = rowCount;

    },
}


viewModel.total = ko.computed(function() {
    var sum = 0;
    ko.utils.arrayForEach(this.cartItems(), function(item) {
        sum += item.subTotal();

    });

    return sum;
},


viewModel);

function item(name, price) {
    var self = this;
    self.name = name;
    self.qty = ko.observable(1);
    self.price = price;
    self.subTotal = ko.computed(function() {
        return self.qty() * self.price;
    });


}


$(function() {

    ko.applyBindings(viewModel);

    $('.item .add-to-cart').click(function() {
        addToCart($(this).parent());
    });

    $('.item').draggable({
        revert: true,
        proxy: 'clone',
        handle: 'img',
        //cancel: 'button', // jqueryUI only
        onStartDrag: function() {
            $(this).draggable('options').cursor = 'not-allowed';
            $(this).draggable('proxy').css('z-index', 10);
        },
        onStopDrag: function() {
            $(this).draggable('options').cursor = 'move';
        }
    });
    $('.cart').droppable({
        onDragEnter: function(e, source) {
            $(source).draggable('options').cursor = 'auto';
        },
        onDragLeave: function(e, source) {
            $(source).draggable('options').cursor = 'not-allowed';
        },
        onDrop: function(e, source) {
            addToCart($(source));
        }
    });

    function addToCart(source) {
        var name = source.find('p:eq(0)').html();
        var price = source.find('p:eq(1)').html();
        var cartItem = new item(name, parseFloat(price.split('$')[1]));

        // check duplicate
        var match =...