0
希望有人能幫助我。HTML5/JavaScript拖放購物車
檢查了其他，類似的問題在這個論壇上，但仍然無法解決這個問題。
嘗試使用HTML5（拖放）和JavaScript創建簡單的購物車。我已經從在線教程中複製了大部分代碼（代碼是開源的並且可以免費使用）。我想擴展代碼，以便當物品被拖入購物車區域時，會顯示購物車中所有物品的總成本。隨着更多項目的添加，該總數將會更新。
此外，我試圖更新代碼，以便用戶可以購買多個任意項目，並試圖讓顯示也顯示購物車中每個項目的數量。
我已經添加了updateCart（）函數，但我很困惑如何讓它正常工作（顯然它沒有按照預期運行）。由於從原始代碼的拖放工作，問題必須在我的updateCart函數中。
我已將'data-price'和'data-quantity'屬性添加到店鋪商品的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>
嘿@Mekong試試這個答案。 – 2014-12-15 04:00:05