jQuery EasyUI使用教程：创建一个拖放的购物车

---

Kendo UI for jQuery——创建现代Web应用程序的最完整UI库！查看详情>>>

<jQuery EasyUI最新版下载>

如果你能利用你的web应用程序很容易地实现简单的拖放，那么你一定知道一些特别的东西，使用jQuery EasyUI，我们能在web应用程序中简单地实现拖放功能。

在本教程中，我们将为你展示如何创建一个用户可以拖放他们想要购买的商品到购物车的页面。购物车中的物品和价格将会更新。

在页面上显示商品：

	
	

		  
		

			
			

				Balloon
			

			

				Price:$25
			

		
 
	

	

		  
		

			
			

				Feeling
			

			

				Price:$25
			

		
 
	

正如你在上面代码中看到的一样，我们添加了一个ul元素，其中包含了一些li元素来显示商品。每个商品的名字和价格属性都包含在p元素中。

创建购物车：

	
	

		Shopping Cart
	

	

		
		

			
			

				
				

					Name
				

				

					Quantity
				

				

					Price
				

			

		

	

	

		Total: $0
	

	

		Drop here to add to cart
	

我们使用数据网格来显示购物车的物品。

拖动复制的商品：

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

请注意，我们将可拖动属性'proxy'设置为'clone'，因此拖动元素将有复制的效果。

在购物车中放置选中的商品：

$('.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]));
}
});
var data = {"total":0,"rows":[]};
var totalCost = 0;
function addProduct(name,price){
function add(){
for(var i=0; i++){
var row = data.rows[i];
if (row.name == name){
row.quantity += 1;
return;
}
}
data.total += 1;
data.rows.push({
name:name,
quantity:1,
price:price
});
}
add();
totalCost += price;
$('#cartcontent').datagrid('loadData', data);
$('div.cart .total').html('Total: $'+totalCost);
} 

当放置好该商品之后，我们首先得到商品的名称和价格，然后调用'addProduct'函数来更新购物车。

下载该EasyUI示例：

购买最新正版授权！""