用html5实现的购物车拖拽特效

来源：互联网发布：空总激光美容中心知乎编辑：程序博客网时间：2024/06/05 04:41

这里面还集成计算总价，个人感觉蛮好的。http://www.hadoop1234.com

<!DOCTYPE html>

<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>HTML 5 Drag and Drop Shopping Cart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
ul, li{
list-style: none;
margin: 0px;
padding: 0px;
cursor: pointer;
}
section#cart ul{
height: 200px;
overflow: auto;
background-color: #cccccc;
}
</style>
<script>
function addEvent(element, event, delegate ) {
if (typeof (window.event) != 'undefined' && element.attachEvent)
element.attachEvent('on' + event, delegate);
else
element.addEventListener(event, delegate, false);
}

addEvent(document, 'readystatechange', function() {
if ( document.readyState !== "complete" )
return true;

var items = document.querySelectorAll("section.products ul li");
var cart = document.querySelectorAll("#cart ul")[0];

function updateCart(){
var total = 0.0;
var cart_items = document.querySelectorAll("#cart ul 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));
cart_item.querySelectorAll("span.sub-total")[0].innerHTML = " = " + sub_total.toFixed(2);

total += sub_total;
}

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

function addCartItem(item, id) {
var clone = item.cloneNode(true);
clone.setAttribute('data-id', id);
clone.setAttribute('data-quantity', 1);
clone.removeAttribute('id');

var fragment = document.createElement('span');
fragment.setAttribute('class', 'quantity');
fragment.innerHTML = ' x 1';
clone.appendChild(fragment);

fragment = document.createElement('span');
fragment.setAttribute('class', 'sub-total');
clone.appendChild(fragment);
cart.appendChild(clone);
}

function updateCartItem(item){
var quantity = item.getAttribute('data-quantity');
quantity = parseInt(quantity) + 1
item.setAttribute('data-quantity', quantity);
var span = item.querySelectorAll('span.quantity');
span[0].innerHTML = ' x ' + quantity;
}

function onDrop(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;

var id = event.dataTransfer.getData("Text");
var item = document.getElementById(id);

var exists = document.querySelectorAll("#cart ul li[data-id='" + id + "']");

if(exists.length > 0){
updateCartItem(exists[0]);
} else {
addCartItem(item, id);
}

updateCart();

return false;
}

function onDragOver(event){
if(event.preventDefault) event.preventDefault();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
return false;
}

addEvent(cart, 'drop', onDrop);
addEvent(cart, 'dragover', onDragOver);

function onDrag(event){
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.dropEffect = "move";
var target = event.target || event.srcElement;
var success = event.dataTransfer.setData('Text', target.id);
}

for (var i = 0; i < items.length; i++) {
var item = items[i];
item.setAttribute("draggable", "true");
addEvent(item, 'dragstart', onDrag);
};
});
</script>
</head>
<body>
<div id="page">
<section id="cart" class="shopping-cart">
<h1>Shopping Cart</h1>
<ul>
</ul>
<span class="total">0.00</span>
</section>
<section id="products" class="products">
<h1>Product List</h1>
<ul>
<li id="product-1" data-price="2.00"><span>Product 1</span></li>
<li id="product-2" data-price="3.00"><span>Product 2</span></li>
<li id="product-3" data-price="2.99"><span>Product 3</span></li>
<li id="product-4" data-price="3.50"><span>Product 4</span></li>
<li id="product-5" data-price="4.25"><span>Product 5</span></li>
<li id="product-6" data-price="6.75"><span>Product 6</span></li>
<li id="product-7" data-price="1.99"><span>Product 7</span></li>
</ul>
</section>
</div>
</body>

</html>