Question

我目前正在使用jQuery编程拖放购物车。我在编码时遇到问题，因此产品的详细信息会转移到购物篮中。这是我在jsfiddle中的代码：http://jsfiddle.net/cf7av/

和来源：

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>Products</title>
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/style.css">
    <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="scripts/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="scripts/dragdrop.js"></script>

</head>
<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>


$(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);

        }
    });


});

感谢。

拖放购物车n

0 个答案: