jquery拖放加入购物车

一款简单好用的图片拖放加入购物车的效果，自动添加商品并累计价格，同一商品多次拖放会自动累加数量，商品图片区和右侧购物栏均可自适应。

分类：图片代码 > 图片拖动难易：

查看演示下载资源下载积分： 30 积分

HTML

首先引入jquery库。

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

接着设置css样式，并写好商品图片区的内容，给每个商品添加触发事件ondragstart="drag(this)"。

*{padding:0px;margin:0px;font-family: 'Microsoft YaHei', 'Lantinghei SC', 'Open Sans', Arial, 'Hiragino Sans GB', 'STHeiti', 'WenQuanYi Micro Hei', 'SimSun', sans-serif;}
table,thead{width: 100%;}
tr th{width:25%;height:30px;background-color: #23B7E5;font-size: 16px;padding: 2px 0px;color:#fff;}
tr td{text-align: center;padding: 5px 0px;background-color: #fff;font-size: 14px;}
tr td a{padding: 2px 5px;border:1px solid #ddd;cursor: pointer;}
ul li{list-style-type: none;overflow: hidden;}
#div1{width:350px;height:100%;border:1px solid #ddd;position:fixed;right:0px;top:0px;
	background-color: #F5F5F5;
}
#div1 ul li p{width:50%;text-align: right;flex: 1;}
#div2 ul{overflow: hidden;}
#div2 ul li{float: left;width:75px;height:60px;border:1px solid #ddd;margin-right: 10px;}
#div2 ul li img{width: 100%;height: 100%;}
.div_panel{min-height: 200px;}
.allMoney{position: absolute;right: 0px;}

<ul>
	<li>
		<img id="img1" src="images/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="images/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="images/car3.jpg" draggable="true" ondragstart="drag(this)" />
		<input type="hidden" id="inp_money" value="1000"/>
		<input type="hidden" id="inp_name" value="东风特产" />
	</li>
</ul>

部分事件的JAVASCRIPT代码：

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();
}