简单实现拖动商品，加入购物车并总计商品的功能

	
		

			
				
				

					
Balloon
					
Price:$25
				
			
		
		

			
				
				

					
Felling
					
Price:$25
				
			
		
		

			
				
				

					
Balloon3
					
Price:$25
				
			
		
		

			
				
				

					
Balloon4
					
Price:$25
				
			
		
	
	
	
		
shopping cart
		
			
				
				
					Name
					Quantity
					Price
				
			
			
		

Total: $0

Drop here to add to cart

	.products{
			list-style:none;
			margin-right:300px;
			padding:0px;
			height:100%;
		}
		.products li{
			display:inline;
			float:left;
			margin:10px;
		}
		.item{
			display:block;
			text-decoration:none;
		}
		.item img{
			border:1px solid #333;
		}
		.item p{
			margin:0;
			font-weight:bold;
			text-align:center;
			color:#c3c3c3;
		}
		.cart{
			position:fixed;
			right:0;
			top:0;
			width:300px;
			height:100%;
			background:#ccc;
			padding:0px 10px;
		}
		h1{
			text-align:center;
			color:#555;
		}
		h2{
			position:absolute;
			font-size:16px;
			left:10px;
			bottom:20px;
			color:#555;
		}
		.total{
			margin:0;
			text-align:right;
			padding-right:20px;
		}
	

	var data = {"total":0,"rows":[]};
	var totalCost = 0;
	
	$(function(){
		$('#cartcontent').datagrid({
			singleSelect:true
		});
		$('.item').draggable({
			revert:true,
			proxy:'clone',
			onStartDrag:function(){
				$(this).draggable('options').cursor = 'not-allowed';
				$(this).draggable('proxy').css('z-index',10);
			},
			onStopDrag:function(){
				$(this).draggable('options').cursor = 'move';
			}
		});
		$('.cart').droppable({
			onDragEnter:function(e,source){
				$(source).draggable('options').cursor = 'auto';
			},
			onDragLeave:function(e,source){
				$(source).draggable('options').cursor = 'not-allowed';
			},
			onDrop:function(e,source){
				var name = $(source).find('p:eq(0)').html();
				var price = $(source).find('p:eq(1)').html();
				addProduct(name,parseFloat(price.split('$')[1]));
			}
		});
	
	});
	function addProduct(name,price){
		function add(){
			for(var i = 0;i