html5拖放实现购物车

当每一个黑色的div被拖动到灰色div中，灰色div就追加一条黑色div的信息。并且自动计算总金额
效果图
html5拖放实现购物车
代码
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/default.css" />
		<title></title>

		<style type="text/css">
			.items>div {
				width: 150px;
				height: 150px;
				background: #111;
				float: left;
				color: #fff;
				margin-right: 10px;
			}
			
			#shopcar {
				width: 500px;
				height: 250px;
				background: #ccc;
				margin-top: 20px;
			}
			
			.title,
			#car_items>p {
				display: flex;
			}
			
			#car_items {
				margin-top: 20px;
			}
			
			.title>p,
			#car_items>p span {
				float: left;
				flex: 1;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="items clearfix" id="items">
			<div class="div1">
				<p>JavaScript面向对象</p>
				<p>120</p>
				<p>深圳</p>
				
			</div>
			<div class="div2">
				<p>HTML5秘籍</p>
				<p>60</p>
				<p>北京</p>
				
			</div>
			<div class="div3">
				<p>HTML5动画</p>
				<p>50</p>
				<p>杭州</p>
				
			</div>
		</div>
		<div id="shopcar">
			<div class="title">
				<p>序号</p>
				<p>书名</p>
				<p>价格</p>
				<p>地点</p>

			</div>
			<div id="car_items">
				<!--<p id="p1">
					<span class="name">mianxdx</span>
					<span class="price">129</span>
					<span class="address">深圳</span>
				</p>-->
			</div>

		</div>
		<div class="totle">
			总价：
			<span id="totleMoney"></span>
		</div>

	</body>
	<script src="js/jquery.js"></script>
	<script type="text/javascript">
		function dom(id) {
			return document.getElementById(id);
		}
		var itemsDom = dom('items');
		var carDom = dom('shopcar');
		var car_itemsDom = dom('car_items');
		var itemsDom_child = itemsDom.children;

		//				console.log(itemsDom_child.length);

		var div = dom('items').getElementsByTagName('div');
		for(var i = 0; i < div.length; i++) {
			div[i].index = i;
			div[i].onclick = function() {
				//				alert(this.index);
			}
		}
		for(var i = 0; i < itemsDom_child.length; i++) {
			itemsDom_child[i].draggable = 'true';
			itemsDom_child[i].index = i
			itemsDom_child[i].ondragstart = function(e) {
				//alert(this.index);
				var json = {};
				var div_p = this.children;
				json.name = div_p[0].innerHTML;
				json.price = div_p[1].innerHTML;
				json.address = div_p[2].innerHTML;
				//				json.id = div_p[3].innerHTML;
				json.id = this.index;
				//				console.log(json);
						//序列化成jsonstring
				var jsonString = JSON.stringify(json);
				//				e.dataTransfer.setData('text', json);
				//				e.dataTransfer.setData('text', e.target.outerHTML);
						//放入到数据传输对象中
				e.dataTransfer.setData('text', jsonString);

			}
		}
		carDom.ondragover = function(e) {
			e.preventDefault();
		}
		carDom.ondrop = function(e) {

			var data = e.dataTransfer.getData('text');
			var json = JSON.parse(data);
			//			console.log(json);

			var txtDom = dom('txt' + json.id);
			if(!txtDom) {
				/*var span = document.createElement('span');
				span.className = 'name';
				span.innerHTML = data.name;*/
				var html =
					'<p id="txt' + json.id + '">' +
					'<span class="name">' + json.id + '</span>' +
					'<span class="name">' + json.name + '</span>' +
					'<span class="price">' + json.price + '</span>' +
					'<span class="address">' + json.address + '</span>' +
					'</p>'
				car_itemsDom.innerHTML += html;

			} else {
				var spans = dom('txt' + json.id).children;
				var price = spans[2].innerHTML || 0;
				spans[2].innerHTML = price * 1 + json.price * 1;
			}
			totleMoney();
 
		}

		function totleMoney() {
			var len = dom('car_items').children.length;


			var totlePrice = 0;
			for(var i = 0; i < len; i++) {
			console.log(i)
				var price = $('#car_items>p').eq(i).find('.price').text() || 0;
				totlePrice += price * 1;

			}
			//			console.log(spans)
			dom('totleMoney').innerHTML = totlePrice;

		}
	</script>

</html>
html5拖放 实现购物车

相关推荐

html5拖放实现购物车
