请教一个JavaScript Demo,(jquery框架的购物车拖拽) ~

 </script>        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script src="path/jquery.js" type="text/javascript">
        </script>
        <script src="path/interface.js" type="text/javascript">
        </script>
        <style type="text/css">
            * {
                PADDING-RIGHT: 0px;
                PADDING-LEFT: 0px;
                PADDING-BOTTOM: 0px;
                MARGIN: 0px;
                PADDING-TOP: 0px
            }
            
            BODY {
                PADDING-RIGHT: 20px;
                PADDING-LEFT: 20px;
                FONT-SIZE: 12px;
                PADDING-BOTTOM: 20px;
                COLOR: #000;
                PADDING-TOP: 20px;
                FONT-FAMILY: Arial, Helvetica, sans-serif;
                BACKGROUND-COLOR: #fff
            }
            
            H1 {
                FONT-SIZE: 15px;
                MARGIN: 0px 0px 30px;
                COLOR: #6caf00
            }
            
            #cart {
                BORDER-RIGHT: #eee 1px solid;
                BORDER-TOP: #eee 1px solid;
                FLOAT: right;
                BORDER-LEFT: #eee 1px solid;
                WIDTH: 200px;
                BORDER-BOTTOM: #eee 1px solid
            }
            
            #cart H3 {
                PADDING-RIGHT: 4px;
                PADDING-LEFT: 4px;
                FONT-SIZE: 12px;
                PADDING-BOTTOM: 4px;
                COLOR: #fff;
                PADDING-TOP: 4px;
                BACKGROUND-COLOR: #6caf00
            }
            
            #cart P {
                PADDING-RIGHT: 4px;
                PADDING-LEFT: 4px;
                PADDING-BOTTOM: 10px;
                PADDING-TOP: 10px
            }
            
            .cart {
                BACKGROUND-COLOR: #f8f8f8
            }
            
            .activeCart {
                BACKGROUND-COLOR: #daff9f
            }
            
            .hoverCart {
                BACKGROUND-COLOR: #ffffcc
            }
            
            #products {
                WIDTH: 600px;
                MARGIN-RIGHT: 250px
            }
            
            .product {
                FLOAT: left;
                MARGIN-BOTTOM: 20px;
                WIDTH: 200px;
                HEIGHT: 200px
            }
            
            .product img {
                CURSOR: move
            }
            
            .product h2 {
                PADDING-RIGHT: 0px;
                PADDING-LEFT: 0px;
                FONT-SIZE: 12px;
                PADDING-BOTTOM: 6px;
                PADDING-TOP: 6px
            }
            
            .product P {
                FONT-SIZE: 11px;
                COLOR: #333
            }
            
            .product A {
                COLOR: #6caf00
            }
            
            .productCart {
                FONT-SIZE: 10px;
                MARGIN: 10px
            }
            
            .productCart A {
                FLOAT: right;
                COLOR: #f00
            }
            
            .transferProduct {
                BORDER-RIGHT: #6caf00 1px solid;
                BORDER-TOP: #6caf00 1px solid;
                BORDER-LEFT: #6caf00 1px solid;
                BORDER-BOTTOM: #6caf00 1px solid
            }
        </style>
        <meta content="MSHTML 6.00.6000.16640" name="GENERATOR"/>
</head>
<body>
    

解决方案 »

  1.   

    <form id="form1" runat="server">
        
            <div class="cart" id="cart">  //右侧展示的购物车
                <h3>Your cart</h3>
                <div id="cartProducts"></div>
                <p>
                    <strong>Total: <span id="cartTotal">0</span> $</strong>
                </p>
                <input id="Button2" type="button" value="获取购物信息" onclick="GetCars1()" />
            </div>        
            <h1>所有衬衫分类</h1>
            <div id="products">
                <div class="product" id="product1">
                    <img alt="" src="path/th_17l519col3.jpg"/><h2>商品 1</h2>
                    <p style="color:red;">
                        粉黄线条
                    </p>
                    <p>
                        <strong>价格: <span>49.95</span> $</strong>
                    </p>
                    <a href="#">add to cart</a>
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function(){debugger
                    $('#products a').bind('click', function(){
                        $(this.parentNode).TransferTo({
                            to: addProductToCart(this.parentNode),
                            className: 'transferProduct',
                            duration: 400
                        });
                        return false;
                    });
                    $('div.product').Draggable({
                        revert: true,
                        fx: 300,
                        ghosting: true,
                        opacity: 0.4
                    });
                    $('#cart').Droppable({
                        accept: 'product',
                        activeclass: 'activeCart',
                        hoverclass: 'hoverCart',
                        tolerance: 'intersect',
                        onActivate: function(dragged){
                            if (!this.shakedFirstTime) {
                                $(this).Shake(3);
                                this.shakedFirstTime = true;
                            }
                        },
                        onDrop: addProductToCart
                    });
                });
                var addProductToCart = function(dragged)
                {debugger
                    var cartItem;
                    var productName = $('h2', dragged).html(); //商品名称
                    var productPrice = parseFloat($('span', dragged).html());  //单价
                    var productId = $(dragged).attr('id'); //商品ID
                    var isInCart = $('#' + productId + '_cart');
                    if (isInCart.size() == 1)  //如果购物车内已经存在该商品,则数量加一
                    {
                        var quantity = parseInt(isInCart.find('span.quantity').html()) + 1;
                        isInCart.find('span.quantity').html(quantity + '').end().Pulsate(300, 2);
                        cartItem = isInCart.get(0);
                    }
                    else  //如果购物车内不存在该商品,则添加该商品
                    {
                        $('#cartProducts').append('<div class="productCart" id="' + productId + '_cart">' + productName + '<a href="#">remove</a><br />qty: <span class="quantity">1</span><br />price: <span class="price">' + productPrice + ' $</span></div>').find('div.productCart:last').fadeIn(400).find('a').bind('click', function()
                        {
                            $(this.parentNode).DropOutDown(400, function()
                            {
                                $(this).remove();
                                calculateCartTotal();
                            });
                            return false;
                        });
                        cartItem = $('div.productCart:last').get(0);  //添加,删除商品  慢动画效果
                    } //alert(isInCart.size());  //该商品的数量一共有多少个
                    calculateCartTotal();
                    return cartItem;
                };
                var calculateCartTotal = function(){debugger
                    var total = 0;
                    $('#cartProducts .productCart').each(function(){
                        var price = parseFloat($('span.price', this).html());
                        var quantity = parseInt($('span.quantity', this).html());
                        total += price * quantity;
                    });
                    $('#cartTotal').html(formatNr(total));
                    $('#cart p').Highlight(500, '#ff0', function(){
                        $(this).css('backgroundColor', 'transparent');
                    });
                };
                var formatNr = function(nr)  //nr 总价
                {debugger
                    thousands = parseInt(nr / 1000);
                    hundreds = parseInt(nr - thousands * 1000);
                    decimals = parseInt((nr - parseInt(nr)) * 100);
                    return (thousands > 0 ? thousands + ' ' : '') + (nr > 1000 & hundreds < 100 ? '0' : '') + (nr > 1000 & hundreds < 10 ? '0' : '') + hundreds + '.' + (decimals > 0 ? decimals : '-');
                }
            </script>
            <script language="Javascript" type="text/javascript">var client_id = 1; alert(client_id);
            </script>
            <script language="Javascript" src="" type="text/javascript">
            </script>
            
        </form>