jQuery拖動商品到購物車顯示價格代碼



87 347 116



特效描述: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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表