jQuery拖动商品到购物车显示价格代码



93 368 123



特效描述:jQuery拖动商品 购物车显示价格,jQuery拖动商品到购物车显示价格代码

代码结构

1. 引入JS

<script src="js/jquery-1.9.1.min.js"></script>

2. HTML代码

拖拽到右侧
<div id="div2">
	<ul>
		<li>
			<img id="img1" src="img/car1.jpg" draggable="true" ondragstart="drag(this)" />
			<input type="hidden" id="inp_money" value="23">
			<input type="hidden" id="inp_name" value="耐克3.0" />
		</li>
		<li>
			<img id="img1" src="img/car2.jpg" draggable="true" ondragstart="drag(this)" />
			<input type="hidden" id="inp_money" value="100">
			<input type="hidden" id="inp_name" value="奥迪" />
		</li>
		<li>
			<img id="img1" src="img/car3.jpg" draggable="true" ondragstart="drag(this)" />
			<input type="hidden" id="inp_money" value="1000">
			<input type="hidden" id="inp_name" value="东风特产" />
		</li>
	</ul>
</div>
<div id="div1" ondrop="drop()" ondragover="allowDrop(event)">
	<div class="div_panel">
		<table border="0" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th>名称</th>
					<th>单价</th>
					<th>数量</th>
					<th>价格</th>
				</tr>
			</thead>
			<tbody id="ul_panel"></tbody>
		</table>
	</div>
	<p class="allMoney">总价:<span id="totalMoney">0</span></p>
</div>
<script>
	var money=0;
	var name="";
	var data=[];
	function allowDrop(e){
		e.preventDefault();
	}
	function drag(t){
		money=$(t).siblings("#inp_money").val();
		name=$(t).siblings("#inp_name").val();
		/*var num=1;
		add(name,money,num);*/
	}
	function addJson(name,money){
		for(var j=0;j<data.length;j++){
			if(data[j].name==name){
				data[j].num++;
				return;
			}
		}
		data.push({
			money:money,
			name:name,
			num:1
		});
	}
	function addHtml(){
		var text_html='';
		var totalMoney=0;
		$("#ul_panel").html("");
		for(var i=0;i<data.length;i++){
			text_html+='<tr><td>'+data[i].name+'</td><td>'+data[i].money+'</td><td><a onclick="reduce(\'\'+'+i+',this)">-</a> '+data[i].num+' ';
			text_html+='<a onclick="addNum(\'\'+'+i+',this)">+</a></td><td>¥'+(data[i].money*data[i].num)+'</td></tr>';
			totalMoney+=data[i].money*data[i].num;
			$("#totalMoney").text(totalMoney);
		}
		$("#ul_panel").append(text_html);
	}
	function drop(){
		addJson(name,money);
		addHtml();
	}
	function reduce(a,t){
		data[a].num--;
		if(data[a].num==0){
			data.splice(a,1);
		}
		if(data.length==0){
			$("#totalMoney").text(0);
		}
		addHtml();
	}
	function addNum(a,t){
		data[a].num++;
		addHtml();
	}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 拖动 拖拽 拖动插件 拖拽插件 切换按钮 表单 表单美化 表单插件 表单美化插件 图片拖动 图片拖拽 按钮控制 购物车

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到