HTML5 / JavaScript拖放购物车

时间：2014-12-13 11:49:18

标签： javascript html5

希望有人可以帮助我。

在此论坛上查看了其他类似问题，但仍然无法解决此问题。

尝试使用HTML5（拖放）和JavaScript创建简单的购物车。我已经从在线教程中复制了以下大部分代码（代码是开源的，可以免费使用）。我想扩展代码，以便在将项目拖入购物车区域时，显示购物车中所有商品的总成本。随着更多项目的添加，此总数将会更新。

另外，我尝试更新代码，以便用户可以购买多件商品，并尝试让显示屏显示购物车中每件商品的数量。

我已添加了updateCart（）函数，但我对如何使其正常工作感到困惑（显然它没有按预期运行）。由于原始代码的拖放工作正常，因此问题必须在我的updateCart函数中。

我已添加＆＃39;数据的价格＆＃39;和＆＃39;数据量＆＃39;商品的li标签属性。我试图让总价格显示但尚未查看商品数量。

任何建议都将受到赞赏。

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Drag and drop in HTML 5, demonstration with a shop</title>
  <style>
  body {
  padding:32px;
  }
 .shop {
 border-radius:6px;
 list-style-type:none;
 padding:0;
 margin:0;
 }

 .shop li{
 display:inline;
 }
 .cart {
  border: 4px solid #0066FF;
  border-radius:6px;
  min-height:128px;
  display:block;
  }
 .product {
 border:3px solid white;
 }
.product:hover {
 border:3px solid red;
 cursor:move;
 }
.itemchoosen {
this.style.opacity = 0.5;
this.style.border = "2px solid red";
 }
.itemblurred {
this.style.border = none;
}

#cartArea {
position: relative;
height: 200px;
width: 100%;
float: left;
border: 1px dotted #999;
}
</style>
</head>
<body >

<fieldset><legend>The shop</legend>

<ul id="shop" class="shop">
<li data-price="30.00" data-quantity="1"><img class="product" id="chair" src="images/chair.jpg"     width="96" height="96"></li>
<li data-price="250.00" data-quantity="1"><img class="product" id="monitor" src="images/screen.jpg" width="96" height="96"></li>
<li data-price="80.00" data-quantity="1"><img class="product" id="bag" src="images/bag.jpg" width="96" height="96"></li>
<li data-price="350.00" data-quantity="1"><img class="product" id="transat" src="images/transat.jpg" width="96" height="96"></li>
</ul>
</fieldset>

<fieldset id="mycart" class="cart"><legend>My cart</legend>
<div id="cartArea"></div>
</fieldset>

<fieldset id="mycart" class="cart"><legend>Total</legend>
<p id="the_sub_total"></p>
<p id="the_total"></p>
</fieldset>

<script>
var cartArea = document.querySelector('#cartArea'); 

var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
prods[i].setAttribute('draggable', 'true');  // optional with images
prods[i].addEventListener('dragstart', function(evnt) {
    this.className = 'itemchoosen';
    evnt.dataTransfer.effectAllowed = 'copy';
    evnt.dataTransfer.setData('text', this.id);
    return false;  
}, false);
}   


cartArea.addEventListener('dragover', function(evnt) {
    if (evnt.preventDefault) evnt.preventDefault();
    evnt.dataTransfer.dropEffect = 'copy';
    return false;   
}, false);

cartArea.addEventListener('dragenter', function(evnt) {
    return false;   
}, false);

cartArea.addEventListener('dragleave', function(evnt) {
    return false;
}, false);

cartArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation();
var id = evnt.dataTransfer.getData('text');     
var theitem = document.getElementById(id);  
//theitem.parentNode.removeChild(el);   
theitem.className='itemblurred';
var y  = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault(); // for Firefox

updateCart();

return false;

}, false);

function updateCart(){
var total = 0.0;
var cart_items = document.querySelectorAll("#shop li")
for (var i = 0; i < cart_items.length; i++) {
    var cart_item = cart_items[i];
    var quantity = cart_item.getAttribute('data-quantity');
    var price = cart_item.getAttribute('data-price');
    var sub_total = parseFloat(quantity * parseFloat(price));
    //document.querySelectorAll("#the_sub_total")[0].innerHTML = " = " + sub_total.toFixed(2);
    total += sub_total;
}

document.querySelectorAll("#the_total")[0].innerHTML = total.toFixed(2);
}

</script>

</body>
</html>

2 个答案:

答案 0 :(得分：0)

尝试使用此代码：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Drag and drop in HTML 5, demonstration with a shop</title>
  <style>
  body {
  padding:32px;
  }
 .shop {
 border-radius:6px;
 list-style-type:none;
 padding:0;
 margin:0;
 }

 .shop li{
 display:inline;
 }
 .cart {
  border: 4px solid #0066FF;
  border-radius:6px;
  min-height:128px;
  display:block;
  }
 .product {
 border:3px solid white;
 }
.product:hover {
 border:3px solid red;
 cursor:move;
 }
.itemchoosen {
this.style.opacity = 0.5;
this.style.border = "2px solid red";
 }
.itemblurred {
this.style.border = none;
}

#cartArea {
position: relative;
height: 200px;
width: 100%;
float: left;
border: 1px dotted #999;
}
</style>
</head>
<body >

<fieldset><legend>The shop</legend>

<ul id="shop" class="shop">
<li data-price="30.00" data-quantity="1"><img class="product" id="chair" src="images/chair.jpg"     width="96" height="96"></li>
<li data-price="250.00" data-quantity="1"><img class="product" id="monitor" src="images/screen.jpg" width="96" height="96"></li>
<li data-price="80.00" data-quantity="1"><img class="product" id="bag" src="images/bag.jpg" width="96" height="96"></li>
<li data-price="350.00" data-quantity="1"><img class="product" id="transat" src="images/transat.jpg" width="96" height="96"></li>
</ul>
</fieldset>

<fieldset id="mycart" class="cart"><legend>My cart</legend>
<div id="cartArea"></div>
</fieldset>

<fieldset id="mycart" class="cart"><legend>Total</legend>
<p id="the_sub_total"></p>
<p id="the_total"></p>
</fieldset>

<script>
var total = 0.0;
var cartArea = document.querySelector('#cartArea'); 

var prods = document.querySelectorAll('.product');
for(var i = 0; i < prods.length; i++)
{
prods[i].setAttribute('draggable', 'true');  // optional with images
prods[i].addEventListener('dragstart', function(evnt) {
    this.className = 'itemchoosen';
    evnt.dataTransfer.effectAllowed = 'copy';
    evnt.dataTransfer.setData('text', this.id);
    return false;  
}, false);
}   


cartArea.addEventListener('dragover', function(evnt) {
    if (evnt.preventDefault) evnt.preventDefault();
    evnt.dataTransfer.dropEffect = 'copy';
    return false;   
}, false);

cartArea.addEventListener('dragenter', function(evnt) {
    return false;   
}, false);

cartArea.addEventListener('dragleave', function(evnt) {
    return false;
}, false);

cartArea.addEventListener('drop', function(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation();

var id = evnt.dataTransfer.getData('text');     
var theitem = document.getElementById(id);  
console.log(theitem.parentNode.attributes); 
var quantity=theitem.parentNode.attributes['data-quantity'].value;
var price = theitem.parentNode.attributes['data-price'].value;
console.log(price);
theitem.className='itemblurred';
var y  = document.createElement('img');
y.src = theitem.src;
cartArea.appendChild(y);
evnt.preventDefault(); // for Firefox

updateCart(quantity,price);

return false;

}, false);

function updateCart(quantity,price){
    var sub_total = parseFloat(quantity * parseFloat(price));
    total = total+sub_total;
    document.getElementById('total').value= total;
document.querySelectorAll("#the_total")[0].innerHTML = total.toFixed(2);
}

</script>

</body>
</html>

答案 1 :(得分：0)

更新代码：

您正在 updateCart（）中运行循环，首先获取所有商品的价格，然后检查购物车中的所有商品，而不是将价格作为参数发送到 updateCart（）函数，因为您已经获取了最近在cartArea.addEventListener('drop', function(evnt)中删除的元素。

如果需要，您可以添加滚动到 cartArea 。

但我不明白为什么你在这里使用sub_total，如果你想在项目图像下面显示商品价格，那么就没有必要了。

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>Drag and drop in HTML 5, demonstration with a shop</title>
    <style>
        body {
            padding:32px;
        }
        .shop {
            border-radius:6px;
            list-style-type:none;
            padding:0;
            margin:0;
        }
        .shop li{
            display: inline-table;
        }
        .cart {
            border: 4px solid #0066FF;
            border-radius:6px;
            min-height:128px;
            display:block;
            padding: 20px 10px;
        }
        .product {
            border:3px solid white;
        }
        .product:hover {
            border:3px solid red;
            cursor:move;
        }
        .itemchoosen {
            this.style.opacity = 0.5;
            this.style.border = "2px solid red";
        }
        .itemblurred {
            this.style.border = none;
        }
        #cartArea {
            position: relative;
            min-height: 200px;
            width: 100%;
            float: left;
        }
        #cartArea img {
            float: left;
            width: 20%;
            margin: 2%;
        }
        .itemPrice {
            width: 100%;
            float: left;
        }
    </style>
</head>
<body >
    <fieldset><legend>The shop</legend>
        <ul id="shop" class="shop">
            <li><img class="product" id="chair" src="images/chair.jpg" width="96" height="96" data-price="30.00" data-quantity="1"></li>
            <li><img class="product" id="monitor" src="images/screen.jpg" width="96" height="96" data-price="250.00" data-quantity="1"></li>
            <li><img class="product" id="bag" src="images/bag.jpg" width="96" height="96" data-price="80.00" data-quantity="1"></li>
            <li><img class="product" id="transat" src="images/transat.jpg" width="96" height="96" data-price="350.00" data-quantity="1"></li>
        </ul>
    </fieldset>
    <fieldset id="mycart" class="cart">
        <legend>My cart</legend>
        <div id="cartArea"></div>
    </fieldset>
    <fieldset id="mycart" class="cart">
        <legend>Total</legend>
        <p id="the_sub_total"></p>
        <p id="the_total">0</p>
    </fieldset>
    <script>
        var cartArea = document.querySelector('#cartArea'); 
        var prods = document.querySelectorAll('.product');
        var itemPriceElement;
        for(var i = 0; i < prods.length; i++) {
            itemPriceElement = document.createElement("span");
            itemPriceElement.className = "itemPrice";
            itemPriceElement.innerHTML = prods[i].getAttribute("data-price");
            prods[i].parentNode.insertBefore(itemPriceElement, prods[i].nextSibling);
            prods[i].setAttribute('draggable', 'true');  // optional with images
            prods[i].addEventListener('dragstart', function(evnt) {
                //this.className = 'itemchoosen';
                this.classList.add('itemchoosen');
                evnt.dataTransfer.effectAllowed = 'copy';
                evnt.dataTransfer.setData('text', this.id);
                return false;  
            }, false);
        }   
        cartArea.addEventListener('dragover', function(evnt) {
            if (evnt.preventDefault) evnt.preventDefault();
            evnt.dataTransfer.dropEffect = 'copy';
            return false;   
        }, false);
        cartArea.addEventListener('dragenter', function(evnt) {
            return false;   
        }, false);
        cartArea.addEventListener('dragleave', function(evnt) {
            return false;
        }, false);
        cartArea.addEventListener('drop', function(evnt) {
            if (evnt.stopPropagation) evnt.stopPropagation();
            var id = evnt.dataTransfer.getData('text');     
            var theitem = document.getElementById(id); 
            //theitem.parentNode.removeChild(el);   
            //theitem.className='itemblurred';
            theitem.classList.add('itemblurred');
            var y  = document.createElement('img');
            y.src = theitem.src;
            cartArea.appendChild(y);
            evnt.preventDefault(); // for Firefox
            updateCart(theitem.getAttribute("data-price"));
            return false;
        }, false);
        function updateCart(price){
            var the_total = document.getElementById("the_total").innerHTML;
            the_total = parseInt(the_total);
            the_total = the_total + parseInt(price);
            document.getElementById("the_total").innerHTML = the_total;
        }
    </script>
</body>
</html>
相关问题
最新问题