JSFiddle - React, Tailwind, and code Playground

by gopi1410

HTML

<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/demo/demo.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.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>
    <ul class="products">
        <li>
            <a href="#" class="item">
                <img src="images/shirt1.gif"/>
                <div>
                    <p>Balloon</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt2.gif"/>
                <div>
                    <p>Feeling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt3.gif"/>
                <div>
                    <p>Elephant</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt4.gif"/>
                <div>
                    <p>Stamps</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt5.gif"/>
                <div>
                    <p>Monogram</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" class="item">
                <img src="images/shirt6.gif"/>
                <div>
                    <p>Rolling</p>
                    <p>Price:$25</p>
                </div>
            </a>
        </li>
    </ul>

<div class="cart">  
    <h1>Shopping Cart</h1>  
    <table...

CSS

.products{
            list-style:none;
            margin:0;
            margin-right:300px;
            padding:0px;
            height:100%;
        }
        .products li{
            display:inline;
            float:left;
            margin:10px;
        }
        .item{
            display:block;
            text-decoration:none;
        }
        .item img{
            border:1px solid #333;
        }
        .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;
        }
        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);
    },
}

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);
    /*
    $('#cartcontent').datagrid({
        singleSelect: true
    });
    */
    $('.item').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({
        onDragEnter: function(e, source) {
            $(source).draggable('options').cursor = 'auto';
        },
        onDragLeave: function(e, source) {
            $(source).draggable('options').cursor = 'not-allowed';
        },
        onDrop: function(e, 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 = ko.utils.arrayFirst(viewModel.cartItems(), function(item){ return item.name == name; });
            if(match){
                match.qty(match.qty() + 1);
            } else {
              viewModel.cartItems.push(cartItem);
            }
       ...